DemoQ2
Distribuidora Ibérica · catálogo Q2
Demo del módulo de inventario y compras antes del 28 de mayo.
Tablero kanban con columnas y tarjetas arrastrables. Construido a partir de primitivos: no existe ningún componente Kanban en OutfitKit. Es composición de un grid horizontal scrollable + columnas con Card + tarjetas con Card interactive. Consulta el ejemplo completo en examples/mini-apps/kanban.html.
display:flex; overflow-x:auto + columnas de ancho fijo (~280 px) con header (.title.sm + Chip count) + body con Card tarjetas + footer con Button ghost block para añadir.
Demo del módulo de inventario y compras antes del 28 de mayo.
€ 4.200 / año
Sin POS actualmente, viene de hojas de cálculo.
en 2 días
Reunión cerrada para el martes con CFO.
€ 18.000 / año
€ 8.400 / año
<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px;width:100%">
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
<span class="chip sm">8</span>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<article class="card interactive"><div class="body">
<div class="row" style="gap:4px;margin-bottom:6px"><span class="chip info sm">Demo</span><span class="chip brand sm">Q2</span></div>
<h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
<p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
<div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
</div></article>
<article class="card interactive"><div class="body"><h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5><p class="meta">€ 4.200 / año</p></div></article>
<article class="card interactive"><div class="body">
<h5 class="title sm">Restaurante Vega</h5>
<p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
<p class="meta"><span class="chip warn sm">en 2 días</span></p>
</div></article>
</div>
<button class="btn ghost sm block">+ Añadir tarjeta</button>
</section>
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
<span class="chip sm">5</span>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<article class="card interactive"><div class="body">
<h5 class="title sm">Cadena Café Norte · 12 locales</h5>
<p class="sub muted">Reunión cerrada para el martes con CFO.</p>
<p class="meta">€ 18.000 / año</p>
</div></article>
<article class="card interactive elevated" style="opacity:0.7;transform:rotate(2deg)"><div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div></article>
</div>
<button class="btn ghost sm block">+ Añadir</button>
</section>
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
<span class="chip sm">3</span>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<article class="card interactive"><div class="body"><h5 class="title sm">Olé Restaurantes · onboarding</h5><p class="meta">€ 8.400 / año</p></div></article>
</div>
<button class="btn ghost sm block">+ Añadir</button>
</section>
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
<span class="chip success sm">12</span>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<article class="card interactive"><div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div></article>
</div>
<button class="btn ghost sm block">+ Añadir</button>
</section>
</div>
<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px">
<!-- Columna 1 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
<Chip size="sm">8</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<div class="row" style="gap:4px;margin-bottom:6px">
<Chip color="info" size="sm">Demo</Chip>
<Chip color="brand" size="sm">Q2</Chip>
</div>
<h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
<p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
<div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
</div>
</Card>
<Card interactive>
<div class="body">
<h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5>
<p class="meta">€ 4.200 / año</p>
</div>
</Card>
<Card interactive>
<div class="body">
<h5 class="title sm">Restaurante Vega</h5>
<p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
<p class="meta"><Chip color="warn" size="sm">en 2 días</Chip></p>
</div>
</Card>
</div>
<Button label="+ Añadir tarjeta" variant="ghost" size="sm" block />
</section>
<!-- Columna 2 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
<Chip size="sm">5</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<h5 class="title sm">Cadena Café Norte · 12 locales</h5>
<p class="sub muted">Reunión cerrada para el martes con CFO.</p>
<p class="meta">€ 18.000 / año</p>
</div>
</Card>
<Card interactive attrs={"class": "elevated", "style": "opacity:0.7;transform:rotate(2deg)"}>
<div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
<!-- Columna 3 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
<Chip size="sm">3</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<h5 class="title sm">Olé Restaurantes · onboarding</h5>
<p class="meta">€ 8.400 / año</p>
</div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
<!-- Columna 4 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
<Chip color="success" size="sm">12</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
</div>
<div style="display:flex;gap:14px;overflow-x:auto;height:540px;padding-bottom:8px">
<!-- Columna 1 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot info"></span> Nuevo</h4>
<Chip size="sm">8</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<div class="row" style="gap:4px;margin-bottom:6px">
<Chip color="info" size="sm">Demo</Chip>
<Chip color="brand" size="sm">Q2</Chip>
</div>
<h5 class="title sm">Distribuidora Ibérica · catálogo Q2</h5>
<p class="sub muted">Demo del módulo de inventario y compras antes del 28 de mayo.</p>
<div class="row meta" style="gap:8px;margin-top:8px"><span>📅 28 may</span><span>💬 3</span></div>
</div>
</Card>
<Card interactive>
<div class="body">
<h5 class="title sm">Panadería Marisol · 2 puntos de venta</h5>
<p class="meta">€ 4.200 / año</p>
</div>
</Card>
<Card interactive>
<div class="body">
<h5 class="title sm">Restaurante Vega</h5>
<p class="sub muted">Sin POS actualmente, viene de hojas de cálculo.</p>
<p class="meta"><Chip color="warn" size="sm">en 2 días</Chip></p>
</div>
</Card>
</div>
<Button label="+ Añadir tarjeta" variant="ghost" size="sm" block />
</section>
<!-- Columna 2 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot warn"></span> Cualificado</h4>
<Chip size="sm">5</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<h5 class="title sm">Cadena Café Norte · 12 locales</h5>
<p class="sub muted">Reunión cerrada para el martes con CFO.</p>
<p class="meta">€ 18.000 / año</p>
</div>
</Card>
<Card interactive attrs={"class": "elevated", "style": "opacity:0.7;transform:rotate(2deg)"}>
<div class="body"><h5 class="title sm">Bodega Pérez · Q3</h5></div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
<!-- Columna 3 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot brand"></span> Propuesta</h4>
<Chip size="sm">3</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body">
<h5 class="title sm">Olé Restaurantes · onboarding</h5>
<p class="meta">€ 8.400 / año</p>
</div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
<!-- Columna 4 -->
<section style="flex:0 0 280px;display:flex;flex-direction:column;gap:8px">
<header class="row" style="justify-content:space-between;padding:0 4px">
<h4 class="title sm"><span class="dot success"></span> Cerrado</h4>
<Chip color="success" size="sm">12</Chip>
</header>
<div style="display:flex;flex-direction:column;gap:8px;overflow-y:auto">
<Card interactive>
<div class="body"><h5 class="title sm">Café Tuña · activo desde abr 26</h5></div>
</Card>
</div>
<Button label="+ Añadir" variant="ghost" size="sm" block />
</section>
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />