Café espresso
€1,40
POS — OutfitKit
POS · Layout completo
Layout principal del punto de venta: chips de categorías, grid de productos y panel del carrito. Construido a partir de primitivos: no existe ningún componente Pos en OutfitKit. Es composición de un grid 2-col (catálogo + carrito), Chip para categorías, Card interactive para productos y List + totales para el carrito. Consulta el ejemplo completo en examples/domain/pos.html.
Composición: CSS-grid 1fr / 320px → main = chips de categoría + grid de
Card productos; aside = Card con header del cliente + List de líneas + filas .row de totales + Button block de cobro.
Cafetería · catálogo + carrito
Todos · 142
Cafés · 18
Tés · 12
Bocadillos · 24
Postres · 14
Bebidas · 22
Café cortado
€1,60
Café con leche
€1,80
Cappuccino doble
€2,40
Té matcha
€2,80
Tostada tomate
€3,50
Tostada salmón
€5,90
Croissant choco
€2,40
Tarta queso
Agotado
Mesa 4 · Ana
Pedido en curso · 4 líneas
2× Café cortado
leche desnatada · sin azúcar
1× Tostada salmón
extra aguacate
1× Zumo natural
naranja · grande
2× Croissant chocolate
Subtotal€18,00
IVA 10%€1,80
Total€19,80
<div style="display:grid;grid-template-columns:1fr 320px;gap:16px;height:560px;width:100%">
<section style="display:flex;flex-direction:column;gap:12px;overflow:hidden">
<div style="display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex-shrink:0">
<span class="chip brand active" aria-pressed="true">Todos · 142</span>
<span class="chip outline">Cafés · 18</span>
<span class="chip outline">Tés · 12</span>
<span class="chip outline">Bocadillos · 24</span>
<span class="chip outline">Postres · 14</span>
<span class="chip outline">Bebidas · 22</span>
</div>
<div class="grid grid-auto-cols cols-4 gap-3" style="overflow-y:auto;align-content:start">
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:coffee"></iconify-icon></div><div class="body"><div class="title sm">Café espresso</div><div class="value brand">€1,40</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:coffee"></iconify-icon></div><div class="body"><div class="title sm">Café cortado</div><div class="value brand">€1,60</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:coffee"></iconify-icon></div><div class="body"><div class="title sm">Café con leche</div><div class="value brand">€1,80</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:coffee"></iconify-icon></div><div class="body"><div class="title sm">Cappuccino doble</div><div class="value brand">€2,40</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:leaf"></iconify-icon></div><div class="body"><div class="title sm">Té matcha</div><div class="value brand">€2,80</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:sandwich"></iconify-icon></div><div class="body"><div class="title sm">Tostada tomate</div><div class="value brand">€3,50</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:sandwich"></iconify-icon></div><div class="body"><div class="title sm">Tostada salmón</div><div class="value brand">€5,90</div></div></article>
<article class="card interactive"><div class="thumbnail"><iconify-icon icon="lucide:croissant"></iconify-icon></div><div class="body"><div class="title sm">Croissant choco</div><div class="value brand">€2,40</div></div></article>
<article class="card muted"><div class="thumbnail"><iconify-icon icon="lucide:cake"></iconify-icon></div><div class="body"><div class="title sm">Tarta queso</div><div class="value danger">Agotado</div></div></article>
</div>
</section>
<div class="card" style="display:flex;flex-direction:column;overflow:hidden">
<header class="head">
<div class="heading"><h3 class="title">Mesa 4 · Ana</h3><p class="meta">Pedido en curso · 4 líneas</p></div>
</header>
<div class="list" style="flex:1;overflow-y:auto">
<div class="item"><div class="label"><div class="title sm"><b>2×</b> Café cortado</div><div class="meta">leche desnatada · sin azúcar</div></div><span class="note">€3,20</span></div>
<div class="item"><div class="label"><div class="title sm"><b>1×</b> Tostada salmón</div><div class="meta">extra aguacate</div></div><span class="note">€6,40</span></div>
<div class="item"><div class="label"><div class="title sm"><b>1×</b> Zumo natural</div><div class="meta">naranja · grande</div></div><span class="note">€3,60</span></div>
<div class="item"><div class="label"><div class="title sm"><b>2×</b> Croissant chocolate</div></div><span class="note">€4,80</span></div>
</div>
<div class="body" style="border-top:var(--border-w) solid var(--line)">
<div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€18,00</span></div>
<div class="row" style="justify-content:space-between"><span class="meta">IVA 10%</span><span>€1,80</span></div>
<div class="row title lg" style="justify-content:space-between"><span>Total</span><span>€19,80</span></div>
</div>
<footer class="foot">
<button class="btn brand lg block">Cobrar · €19,80 →</button>
</footer>
</div>
</div><div style="display:grid;grid-template-columns:1fr 320px;gap:16px;height:560px">
<!-- Catálogo -->
<section style="display:flex;flex-direction:column;gap:12px;overflow:hidden">
<!-- Categorías como chips -->
<div style="display:flex;gap:6px;overflow-x:auto;padding-bottom:4px">
<Chip color="brand" active>Todos · 142</Chip>
<Chip outline>Cafés · 18</Chip>
<Chip outline>Tés · 12</Chip>
<Chip outline>Bocadillos · 24</Chip>
<Chip outline>Postres · 14</Chip>
<Chip outline>Bebidas · 22</Chip>
</div>
<!-- Grid de productos -->
<Grid cols="4" attrs={"style": "overflow-y:auto;align-content:start"}>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café espresso</div><div class="value brand">€1,40</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café cortado</div><div class="value brand">€1,60</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café con leche</div><div class="value brand">€1,80</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Cappuccino doble</div><div class="value brand">€2,40</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:leaf" />
<div class="body"><div class="title sm">Té matcha</div><div class="value brand">€2,80</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:sandwich" />
<div class="body"><div class="title sm">Tostada tomate</div><div class="value brand">€3,50</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:sandwich" />
<div class="body"><div class="title sm">Tostada salmón</div><div class="value brand">€5,90</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:croissant" />
<div class="body"><div class="title sm">Croissant choco</div><div class="value brand">€2,40</div></div>
</Card>
<Card attrs={"class": "muted"}>
<Thumbnail icon="lucide:cake" />
<div class="body"><div class="title sm">Tarta queso</div><div class="value danger">Agotado</div></div>
</Card>
</Grid>
</section>
<!-- Carrito -->
<Card attrs={"style": "display:flex;flex-direction:column;overflow:hidden"}>
<header class="head">
<div class="heading">
<h3 class="title">Mesa 4 · Ana</h3>
<p class="meta">Pedido en curso · 4 líneas</p>
</div>
</header>
<List attrs={"style": "flex:1;overflow-y:auto"}>
<Item>
<Label>
<div class="title sm"><b>2×</b> Café cortado</div>
<div class="meta">leche desnatada · sin azúcar</div>
</Label>
<Note>€3,20</Note>
</Item>
<Item>
<Label>
<div class="title sm"><b>1×</b> Tostada salmón</div>
<div class="meta">extra aguacate</div>
</Label>
<Note>€6,40</Note>
</Item>
<Item>
<Label>
<div class="title sm"><b>1×</b> Zumo natural</div>
<div class="meta">naranja · grande</div>
</Label>
<Note>€3,60</Note>
</Item>
<Item>
<Label><div class="title sm"><b>2×</b> Croissant chocolate</div></Label>
<Note>€4,80</Note>
</Item>
</List>
<div class="body" style="border-top:var(--border-w) solid var(--line)">
<div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€18,00</span></div>
<div class="row" style="justify-content:space-between"><span class="meta">IVA 10%</span><span>€1,80</span></div>
<div class="row title lg" style="justify-content:space-between"><span>Total</span><span>€19,80</span></div>
</div>
<footer class="foot">
<Button label="Cobrar · €19,80 →" variant="brand" size="lg" block />
</footer>
</Card>
</div><div style="display:grid;grid-template-columns:1fr 320px;gap:16px;height:560px">
<!-- Catálogo -->
<section style="display:flex;flex-direction:column;gap:12px;overflow:hidden">
<!-- Categorías como chips -->
<div style="display:flex;gap:6px;overflow-x:auto;padding-bottom:4px">
<Chip color="brand" active>Todos · 142</Chip>
<Chip outline>Cafés · 18</Chip>
<Chip outline>Tés · 12</Chip>
<Chip outline>Bocadillos · 24</Chip>
<Chip outline>Postres · 14</Chip>
<Chip outline>Bebidas · 22</Chip>
</div>
<!-- Grid de productos -->
<Grid cols="4" attrs={"style": "overflow-y:auto;align-content:start"}>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café espresso</div><div class="value brand">€1,40</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café cortado</div><div class="value brand">€1,60</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Café con leche</div><div class="value brand">€1,80</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:coffee" />
<div class="body"><div class="title sm">Cappuccino doble</div><div class="value brand">€2,40</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:leaf" />
<div class="body"><div class="title sm">Té matcha</div><div class="value brand">€2,80</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:sandwich" />
<div class="body"><div class="title sm">Tostada tomate</div><div class="value brand">€3,50</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:sandwich" />
<div class="body"><div class="title sm">Tostada salmón</div><div class="value brand">€5,90</div></div>
</Card>
<Card interactive>
<Thumbnail icon="lucide:croissant" />
<div class="body"><div class="title sm">Croissant choco</div><div class="value brand">€2,40</div></div>
</Card>
<Card attrs={"class": "muted"}>
<Thumbnail icon="lucide:cake" />
<div class="body"><div class="title sm">Tarta queso</div><div class="value danger">Agotado</div></div>
</Card>
</Grid>
</section>
<!-- Carrito -->
<Card attrs={"style": "display:flex;flex-direction:column;overflow:hidden"}>
<header class="head">
<div class="heading">
<h3 class="title">Mesa 4 · Ana</h3>
<p class="meta">Pedido en curso · 4 líneas</p>
</div>
</header>
<List attrs={"style": "flex:1;overflow-y:auto"}>
<Item>
<Label>
<div class="title sm"><b>2×</b> Café cortado</div>
<div class="meta">leche desnatada · sin azúcar</div>
</Label>
<Note>€3,20</Note>
</Item>
<Item>
<Label>
<div class="title sm"><b>1×</b> Tostada salmón</div>
<div class="meta">extra aguacate</div>
</Label>
<Note>€6,40</Note>
</Item>
<Item>
<Label>
<div class="title sm"><b>1×</b> Zumo natural</div>
<div class="meta">naranja · grande</div>
</Label>
<Note>€3,60</Note>
</Item>
<Item>
<Label><div class="title sm"><b>2×</b> Croissant chocolate</div></Label>
<Note>€4,80</Note>
</Item>
</List>
<div class="body" style="border-top:var(--border-w) solid var(--line)">
<div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€18,00</span></div>
<div class="row" style="justify-content:space-between"><span class="meta">IVA 10%</span><span>€1,80</span></div>
<div class="row title lg" style="justify-content:space-between"><span>Total</span><span>€19,80</span></div>
</div>
<footer class="foot">
<Button label="Cobrar · €19,80 →" variant="brand" size="lg" block />
</footer>
</Card>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Sub-componentes
Páginas relacionadas: Numpad (introducción de cantidad), Pay (selector de método de pago), Receipt (ticket impreso), KDS (pantalla de cocina).