HR card
Ficha de empleado: portada con gradient + avatar + nombre + rol + estado + stats. Construido a partir de primitivos: no existe ningún componente HrCard en OutfitKit. Copia la composición a tu proyecto, o consulta el ejemplo completo en examples/cards/hr-card.html.
Composición: Card + .card-cover.gradient.brand (banner) + header con Avatar xl + .heading + body con Grid cols="3" de stats (.label + .value) + Chip de estado.
MV
Marina Vidal
Jefa de línea · L-2
En turno
Copy
<div style="max-width:380px;width:100%">
<article class="card layout">
<header class="card-cover gradient brand"></header>
<header class="head">
<span class="avatar xl"><span class="avatar-initials">MV</span></span>
<div class="heading">
<h3 class="title">Marina Vidal</h3>
<p class="meta">Jefa de línea · L-2</p>
</div>
<span class="chip success">En turno</span>
</header>
<div class="body">
<div class="grid grid-auto-cols cols-3 gap-3">
<div><div class="label">Antig.</div><div class="value">6,2 a</div></div>
<div><div class="label">Vac. rest.</div><div class="value">14</div></div>
<div><div class="label">Horas mes</div><div class="value">142</div></div>
</div>
</div>
</article>
</div>
Copy
<Card>
<header class="card-cover gradient brand"></header>
<header class="head">
<Avatar label="MV" size="xl" />
<div class="heading">
<h3 class="title">Marina Vidal</h3>
<p class="meta">Jefa de línea · L-2</p>
</div>
<Chip color="success">En turno</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">6,2 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">14</span></div>
<div><span class="label">Horas mes</span><span class="value">142</span></div>
</Grid>
</div>
</Card>
Copy
<Card>
<header class="card-cover gradient brand"></header>
<header class="head">
<Avatar label="MV" size="xl" />
<div class="heading">
<h3 class="title">Marina Vidal</h3>
<p class="meta">Jefa de línea · L-2</p>
</div>
<Chip color="success">En turno</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">6,2 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">14</span></div>
<div><span class="label">Horas mes</span><span class="value">142</span></div>
</Grid>
</div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
IR Iván Ramos Op. cabina pintura
Pausa
Copy
<div style="max-width:380px;width:100%">
<article class="card layout">
<header class="card-cover gradient info"></header>
<header class="head">
<span class="avatar xl"><span class="avatar-initials">IR</span></span>
<div class="heading"><h3 class="title">Iván Ramos</h3><p class="meta">Op. cabina pintura</p></div>
<span class="chip warn">Pausa</span>
</header>
<div class="body">
<div class="grid grid-auto-cols cols-3 gap-3">
<div><div class="label">Antig.</div><div class="value">2,8 a</div></div>
<div><div class="label">Vac. rest.</div><div class="value">22</div></div>
<div><div class="label">Horas mes</div><div class="value">128</div></div>
</div>
</div>
</article>
</div>
Copy
<Card>
<header class="card-cover gradient info"></header>
<header class="head">
<Avatar label="IR" size="xl" />
<div class="heading">
<h3 class="title">Iván Ramos</h3>
<p class="meta">Op. cabina pintura</p>
</div>
<Chip color="warn">Pausa</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">2,8 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">22</span></div>
<div><span class="label">Horas mes</span><span class="value">128</span></div>
</Grid>
</div>
</Card>
Copy
<Card>
<header class="card-cover gradient info"></header>
<header class="head">
<Avatar label="IR" size="xl" />
<div class="heading">
<h3 class="title">Iván Ramos</h3>
<p class="meta">Op. cabina pintura</p>
</div>
<Chip color="warn">Pausa</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">2,8 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">22</span></div>
<div><span class="label">Horas mes</span><span class="value">128</span></div>
</Grid>
</div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Copy
<div style="max-width:380px;width:100%">
<article class="card layout">
<header class="card-cover gradient success"></header>
<header class="head">
<span class="avatar xl"><span class="avatar-initials">LP</span></span>
<div class="heading"><h3 class="title">Lucía Peña</h3><p class="meta">QA Senior</p></div>
<span class="chip neutral">Fuera</span>
</header>
<div class="body">
<div class="grid grid-auto-cols cols-3 gap-3">
<div><div class="label">Antig.</div><div class="value">8,5 a</div></div>
<div><div class="label">Vac. rest.</div><div class="value">3</div></div>
<div><div class="label">Horas mes</div><div class="value">160</div></div>
</div>
</div>
</article>
</div>
Copy
<Card>
<header class="card-cover gradient success"></header>
<header class="head">
<Avatar label="LP" size="xl" />
<div class="heading">
<h3 class="title">Lucía Peña</h3>
<p class="meta">QA Senior</p>
</div>
<Chip color="neutral">Fuera</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">8,5 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">3</span></div>
<div><span class="label">Horas mes</span><span class="value">160</span></div>
</Grid>
</div>
</Card>
Copy
<Card>
<header class="card-cover gradient success"></header>
<header class="head">
<Avatar label="LP" size="xl" />
<div class="heading">
<h3 class="title">Lucía Peña</h3>
<p class="meta">QA Senior</p>
</div>
<Chip color="neutral">Fuera</Chip>
</header>
<div class="body">
<Grid cols="3">
<div><span class="label">Antig.</span><span class="value">8,5 a</span></div>
<div><span class="label">Vac. rest.</span><span class="value">3</span></div>
<div><span class="label">Horas mes</span><span class="value">160</span></div>
</Grid>
</div>
</Card>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Modificadores útiles
.card-cover.gradient.brand — banner superior con gradient (también .success, .info, .warn).avatar.xl — tamaño grande del avatar.heading contiene .title + .meta.label + .value dentro de un Grid cols="3" para stats