List — OutfitKit
List
Lista interactiva con icon + heading + aside. Compose items with .list-item, .list-icon, .heading, .title, .sub, .meta, .list-chev.
Default — settings nav
<div class="list">
<a class="list-item" aria-current="true" href="#">
<span class="list-icon list-icon--brand"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></svg></span>
<div class="heading">
<div class="title">Perfil de empresa</div>
<div class="sub">Cafetería La Rambla S.L. · CIF B-65432109</div>
</div>
<span class="meta">
<span class="badge brand">Sin guardar</span>
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
<a class="list-item" href="#">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/></svg></span>
<div class="heading">
<div class="title">Facturación y pagos</div>
<div class="sub">Plan Business · próxima factura 31 may 2026</div>
</div>
<span class="meta">
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"/></svg></span>
<div class="heading">
<div class="title">Seguridad <span class="badge warning">Atención</span></div>
<div class="sub">3 miembros sin 2FA</div>
</div>
<span class="meta">
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
</div>{% from "list.jinja" import list %}
{% call list() %}
<a class="list-item" aria-current="true" href="#">
<span class="list-icon list-icon--brand"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></svg></span>
<div class="heading">
<div class="title">Perfil de empresa</div>
<div class="sub">Cafetería La Rambla S.L. · CIF B-65432109</div>
</div>
<span class="meta">
<span class="badge brand">Sin guardar</span>
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
<a class="list-item" href="#">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="14" rx="2"/></svg></span>
<div class="heading">
<div class="title">Facturación y pagos</div>
<div class="sub">Plan Business · próxima factura 31 may 2026</div>
</div>
<span class="meta">
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"/></svg></span>
<div class="heading">
<div class="title">Seguridad <span class="badge warning">Atención</span></div>
<div class="sub">3 miembros sin 2FA</div>
</div>
<span class="meta">
<svg class="list-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6-6 6"/></svg>
</span>
</a>
{% endcall %}<List>
<a class="list-item" aria-current="true" href="#">
<span class="list-icon list-icon--brand">…svg…</span>
<div class="heading">
<div class="title">Perfil de empresa</div>
<div class="sub">Cafetería La Rambla S.L. · CIF B-65432109</div>
</div>
<span class="meta">
<span class="badge brand">Sin guardar</span>
<svg class="list-chev" …></svg>
</span>
</a>
</List>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Variant separated · cards
<div class="list separated">
<a class="list-item" href="#">
<span class="list-icon list-icon--leaf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg></span>
<div class="heading">
<div class="title">Pedido FCT-184 enviado</div>
<div class="sub">Restaurante El Caracol · 1.245,80 €</div>
</div>
<span class="meta">hace 12 min</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
<div class="heading">
<div class="title">Nuevo mensaje de Marc Riera</div>
<div class="sub">Sobre presupuesto P-2026-022</div>
</div>
<span class="meta">14:38</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg></span>
<div class="heading">
<div class="title">Stock crítico · Café Brasil 1kg</div>
<div class="sub">4 uds en almacén · mínimo 25</div>
</div>
<span class="meta">15:02</span>
</a>
</div>{% from "list.jinja" import list %}
{% call list(variant="separated") %}
<a class="list-item" href="#">
<span class="list-icon list-icon--leaf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg></span>
<div class="heading">
<div class="title">Pedido FCT-184 enviado</div>
<div class="sub">Restaurante El Caracol · 1.245,80 €</div>
</div>
<span class="meta">hace 12 min</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
<div class="heading">
<div class="title">Nuevo mensaje de Marc Riera</div>
<div class="sub">Sobre presupuesto P-2026-022</div>
</div>
<span class="meta">14:38</span>
</a>
<a class="list-item" href="#">
<span class="list-icon list-icon--danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg></span>
<div class="heading">
<div class="title">Stock crítico · Café Brasil 1kg</div>
<div class="sub">4 uds en almacén · mínimo 25</div>
</div>
<span class="meta">15:02</span>
</a>
{% endcall %}<List variant="separated">
<a class="list-item" href="#">
<span class="list-icon list-icon--leaf">…svg…</span>
<div class="heading">
<div class="title">Pedido FCT-184 enviado</div>
<div class="sub">Restaurante El Caracol · 1.245,80 €</div>
</div>
<span class="meta">hace 12 min</span>
</a>
</List>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Dense + ghost
<div class="list ghost dense">
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg></span>
<div class="heading"><div class="title">Validar plan contable</div></div>
<span class="meta">⌘ 1</span>
</button>
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span>
<div class="heading"><div class="title">Confirmar dirección fiscal</div></div>
<span class="meta">⌘ 2</span>
</button>
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="7" r="4"/><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/></svg></span>
<div class="heading"><div class="title">Invitar al equipo</div></div>
<span class="meta">⌘ 3</span>
</button>
</div>{% from "list.jinja" import list %}
{% call list(variant="ghost", dense=True) %}
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7"/></svg></span>
<div class="heading"><div class="title">Validar plan contable</div></div>
<span class="meta">⌘ 1</span>
</button>
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span>
<div class="heading"><div class="title">Confirmar dirección fiscal</div></div>
<span class="meta">⌘ 2</span>
</button>
<button class="list-item">
<span class="list-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="7" r="4"/><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/></svg></span>
<div class="heading"><div class="title">Invitar al equipo</div></div>
<span class="meta">⌘ 3</span>
</button>
{% endcall %}<List variant="ghost" dense>
<button class="list-item">
<span class="list-icon">…svg…</span>
<div class="heading"><div class="title">Validar plan contable</div></div>
<span class="meta">⌘ 1</span>
</button>
</List>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />API
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | "default"|"ghost"|"separated" | "default" | Estilo del contenedor. |
dense | bool | false | Padding/iconos reducidos. |
attrs | dict | {} | Atributos HTML extra. |
| (slot) | — | — | Items .list-item — componer con .list-icon, .heading, .title, .sub, .meta. |