KDS · Kitchen Display System

Tarjeta de pedido para pantalla de cocina. Construido a partir de primitivos: no existe ningún componente Kds en OutfitKit. Es composición de un Card + List de items + Chip de tiempo + acciones Button. Consulta el ejemplo completo en examples/domain/kds.html.

Composición: Card + header con .heading + Chip de tiempo + List de items + footer .actions con Button. Para variantes de estado usa colores semánticos del Chip (warn = retraso, success = listo) y bordes utilitarios (.ring + color).

Pedido en curso

M2 · #2042

📍 Barra · Roberto

T+02:18

2× Café cortado

leche desnatada · sin azúcar

1× Bocadillo serrano

<div class="card" style="max-width:320px;width:100%">
  <header class="head">
    <div class="heading">
      <h3 class="title sm">M2 · #2042</h3>
      <p class="meta">📍 Barra · Roberto</p>
    </div>
    <span class="chip info">T+02:18</span>
  </header>
  <div class="list">
    <div class="item"><div class="label"><b>2×</b> Café cortado</div></div>
    <div class="item"><div class="label meta">leche desnatada · sin azúcar</div></div>
    <div class="item"><div class="label"><b>1×</b> Bocadillo serrano</div></div>
  </div>
  <footer class="foot actions">
    <button class="btn ghost sm">Marcar</button>
    <button class="btn brand sm">Listo →</button>
  </footer>
</div>

<Card attrs={"style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">M2 · #2042</h3>
      <p class="meta">📍 Barra · Roberto</p>
    </div>
    <Chip color="info">T+02:18</Chip>
  </header>
  <List>
    <Item><Label><b>2×</b> Café cortado</Label></Item>
    <Item><Label class="meta">leche desnatada · sin azúcar</Label></Item>
    <Item><Label><b>1×</b> Bocadillo serrano</Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="Marcar" variant="ghost" size="sm" />
    <Button label="Listo →" variant="brand" size="sm" />
  </footer>
</Card>

<Card attrs={"style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">M2 · #2042</h3>
      <p class="meta">📍 Barra · Roberto</p>
    </div>
    <Chip color="info">T+02:18</Chip>
  </header>
  <List>
    <Item><Label><b>2×</b> Café cortado</Label></Item>
    <Item><Label class="meta">leche desnatada · sin azúcar</Label></Item>
    <Item><Label><b>1×</b> Bocadillo serrano</Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="Marcar" variant="ghost" size="sm" />
    <Button label="Listo →" variant="brand" size="sm" />
  </footer>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variant late · pedido retrasado

M4 · #2041

📍 Mesa · Ana

Pedido 14:32

1× Tostada salmón

+ extra aguacate

1× Zumo naranja grande

2× Croissant chocolate

<div class="card ring danger" style="max-width:320px;width:100%">
  <header class="head">
    <div class="heading"><h3 class="title sm">M4 · #2041</h3><p class="meta">📍 Mesa · Ana</p></div>
    <span class="chip danger">Pedido 14:32</span>
  </header>
  <div class="list">
    <div class="item"><div class="label"><b>1×</b> Tostada salmón</div></div>
    <div class="item"><div class="label meta">+ extra aguacate</div></div>
    <div class="item"><div class="label"><b>1×</b> Zumo naranja grande</div></div>
    <div class="item"><div class="label"><b>2×</b> Croissant chocolate</div></div>
  </div>
  <footer class="foot actions">
    <button class="btn ghost sm">Marcar</button>
    <button class="btn danger sm">Listo →</button>
  </footer>
</div>

<Card attrs={"class": "ring danger", "style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">M4 · #2041</h3>
      <p class="meta">📍 Mesa · Ana</p>
    </div>
    <Chip color="danger">Pedido 14:32</Chip>
  </header>
  <List>
    <Item><Label><b>1×</b> Tostada salmón</Label></Item>
    <Item><Label class="meta">+ extra aguacate</Label></Item>
    <Item><Label><b>1×</b> Zumo naranja grande</Label></Item>
    <Item><Label><b>2×</b> Croissant chocolate</Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="Marcar" variant="ghost" size="sm" />
    <Button label="Listo →" variant="danger" size="sm" />
  </footer>
</Card>

<Card attrs={"class": "ring danger", "style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">M4 · #2041</h3>
      <p class="meta">📍 Mesa · Ana</p>
    </div>
    <Chip color="danger">Pedido 14:32</Chip>
  </header>
  <List>
    <Item><Label><b>1×</b> Tostada salmón</Label></Item>
    <Item><Label class="meta">+ extra aguacate</Label></Item>
    <Item><Label><b>1×</b> Zumo naranja grande</Label></Item>
    <Item><Label><b>2×</b> Croissant chocolate</Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="Marcar" variant="ghost" size="sm" />
    <Button label="Listo →" variant="danger" size="sm" />
  </footer>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variant ready · listo para entregar

DEL · #2043

🛵 Glovo · Eva L.

T+04:05

1× Menú del día

1× Postre del día

<div class="card ring success" style="max-width:320px;width:100%">
  <header class="head">
    <div class="heading"><h3 class="title sm">DEL · #2043</h3><p class="meta">🛵 Glovo · Eva L.</p></div>
    <span class="chip success">T+04:05</span>
  </header>
  <div class="list">
    <div class="item"><div class="label muted"><b>1×</b> Menú del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></div></div>
    <div class="item"><div class="label muted"><b>1×</b> Postre del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></div></div>
  </div>
  <footer class="foot actions">
    <button class="btn success sm">✓ Entregado</button>
  </footer>
</div>

<Card attrs={"class": "ring success", "style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">DEL · #2043</h3>
      <p class="meta">🛵 Glovo · Eva L.</p>
    </div>
    <Chip color="success">T+04:05</Chip>
  </header>
  <List>
    <Item><Label class="muted"><b>1×</b> Menú del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></Label></Item>
    <Item><Label class="muted"><b>1×</b> Postre del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="✓ Entregado" variant="success" size="sm" />
  </footer>
</Card>

<Card attrs={"class": "ring success", "style": "max-width:320px"}>
  <header class="head">
    <div class="heading">
      <h3 class="title sm">DEL · #2043</h3>
      <p class="meta">🛵 Glovo · Eva L.</p>
    </div>
    <Chip color="success">T+04:05</Chip>
  </header>
  <List>
    <Item><Label class="muted"><b>1×</b> Menú del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></Label></Item>
    <Item><Label class="muted"><b>1×</b> Postre del día <iconify-icon icon="lucide:check" width="14"></iconify-icon></Label></Item>
  </List>
  <footer class="foot actions">
    <Button label="✓ Entregado" variant="success" size="sm" />
  </footer>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Patrón Datastar · marcar items

Cada Item puede tener su propio signal: data-on:click="$done = !$done" + data-class:muted="$done" para tachar visualmente.