Receipt — OutfitKit
Receipt
Ticket de caja con ancho fijo y tipografía mono. Construido a partir de primitivos: no existe ningún componente Receipt en OutfitKit. Es composición de un Card estrecho + reglas <hr> + filas flex. Consulta el ejemplo completo en examples/domain/receipt.html.
Composición:
Card de ~320 px ancho + tipografía monospace + filas .row con justify-content: space-between. Para el total final, usa .title.lg.
Ticket cliente
Cafetería La Plaza
C/ Mayor 12 · Madrid
NIF B12345678
PED-2041 · Mesa 4 · 14:22
2× Café cortado3,20
1× Tostada salmón6,40
1× Zumo natural3,60
2× Croissant choco4,80
Subtotal17,64
IVA 10%1,76
TOTAL€19,40
¡Gracias por tu visita!
Sello digital VeriFactu · ABCD-1234
<div class="card spacious" style="max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px">
<div class="title md text-center">Cafetería La Plaza</div>
<p class="sub text-center">C/ Mayor 12 · Madrid<br>NIF B12345678</p>
<hr>
<p class="meta">PED-2041 · Mesa 4 · 14:22</p>
<hr>
<div class="row" style="justify-content:space-between"><span>2× Café cortado</span><span>3,20</span></div>
<div class="row" style="justify-content:space-between"><span>1× Tostada salmón</span><span>6,40</span></div>
<div class="row" style="justify-content:space-between"><span>1× Zumo natural</span><span>3,60</span></div>
<div class="row" style="justify-content:space-between"><span>2× Croissant choco</span><span>4,80</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Subtotal</span><span>17,64</span></div>
<div class="row" style="justify-content:space-between"><span>IVA 10%</span><span>1,76</span></div>
<div class="row title lg" style="justify-content:space-between;margin-top:var(--space-2)"><span>TOTAL</span><span>€19,40</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">¡Gracias por tu visita!<br>Sello digital VeriFactu · ABCD-1234</p>
</div><Card attrs={"class": "spacious", "style": "max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px"}>
<div class="title md text-center">Cafetería La Plaza</div>
<p class="sub text-center">C/ Mayor 12 · Madrid<br>NIF B12345678</p>
<hr>
<p class="meta">PED-2041 · Mesa 4 · 14:22</p>
<hr>
<div class="row" style="justify-content:space-between"><span>2× Café cortado</span><span>3,20</span></div>
<div class="row" style="justify-content:space-between"><span>1× Tostada salmón</span><span>6,40</span></div>
<div class="row" style="justify-content:space-between"><span>1× Zumo natural</span><span>3,60</span></div>
<div class="row" style="justify-content:space-between"><span>2× Croissant choco</span><span>4,80</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Subtotal</span><span>17,64</span></div>
<div class="row" style="justify-content:space-between"><span>IVA 10%</span><span>1,76</span></div>
<div class="row title lg" style="justify-content:space-between;margin-top:var(--space-2)"><span>TOTAL</span><span>€19,40</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">¡Gracias por tu visita!<br>Sello digital VeriFactu · ABCD-1234</p>
</Card><Card attrs={"class": "spacious", "style": "max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px"}>
<div class="title md text-center">Cafetería La Plaza</div>
<p class="sub text-center">C/ Mayor 12 · Madrid<br>NIF B12345678</p>
<hr>
<p class="meta">PED-2041 · Mesa 4 · 14:22</p>
<hr>
<div class="row" style="justify-content:space-between"><span>2× Café cortado</span><span>3,20</span></div>
<div class="row" style="justify-content:space-between"><span>1× Tostada salmón</span><span>6,40</span></div>
<div class="row" style="justify-content:space-between"><span>1× Zumo natural</span><span>3,60</span></div>
<div class="row" style="justify-content:space-between"><span>2× Croissant choco</span><span>4,80</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Subtotal</span><span>17,64</span></div>
<div class="row" style="justify-content:space-between"><span>IVA 10%</span><span>1,76</span></div>
<div class="row title lg" style="justify-content:space-between;margin-top:var(--space-2)"><span>TOTAL</span><span>€19,40</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">¡Gracias por tu visita!<br>Sello digital VeriFactu · ABCD-1234</p>
</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 ... />Cierre Z (resumen turno)
Cierre Z · 18 oct
Turno 14:00–22:00 · Ana M.
Tickets emitidos147
Anulados2
Reembolsos1
Tarjeta1.842,30
Efectivo684,50
Bizum312,80
TOTAL€2.839,60
Caja inicial: €100,00 · Final: €784,50
Diferencia: ✓ cuadrada
<div class="card spacious" style="max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px">
<div class="title md text-center">Cierre Z · 18 oct</div>
<p class="sub text-center">Turno 14:00–22:00 · Ana M.</p>
<hr>
<div class="row" style="justify-content:space-between"><span>Tickets emitidos</span><span>147</span></div>
<div class="row" style="justify-content:space-between"><span>Anulados</span><span>2</span></div>
<div class="row" style="justify-content:space-between"><span>Reembolsos</span><span>1</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Tarjeta</span><span>1.842,30</span></div>
<div class="row" style="justify-content:space-between"><span>Efectivo</span><span>684,50</span></div>
<div class="row" style="justify-content:space-between"><span>Bizum</span><span>312,80</span></div>
<hr>
<div class="row title lg" style="justify-content:space-between"><span>TOTAL</span><span>€2.839,60</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">Caja inicial: €100,00 · Final: €784,50<br>Diferencia: ✓ cuadrada</p>
</div><Card attrs={"class": "spacious", "style": "max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px"}>
<div class="title md text-center">Cierre Z · 18 oct</div>
<p class="sub text-center">Turno 14:00–22:00 · Ana M.</p>
<hr>
<div class="row" style="justify-content:space-between"><span>Tickets emitidos</span><span>147</span></div>
<div class="row" style="justify-content:space-between"><span>Anulados</span><span>2</span></div>
<div class="row" style="justify-content:space-between"><span>Reembolsos</span><span>1</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Tarjeta</span><span>1.842,30</span></div>
<div class="row" style="justify-content:space-between"><span>Efectivo</span><span>684,50</span></div>
<div class="row" style="justify-content:space-between"><span>Bizum</span><span>312,80</span></div>
<hr>
<div class="row title lg" style="justify-content:space-between"><span>TOTAL</span><span>€2.839,60</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">Caja inicial: €100,00 · Final: €784,50<br>Diferencia: ✓ cuadrada</p>
</Card><Card attrs={"class": "spacious", "style": "max-width:320px;font-family:ui-monospace,Menlo,monospace;font-size:12px"}>
<div class="title md text-center">Cierre Z · 18 oct</div>
<p class="sub text-center">Turno 14:00–22:00 · Ana M.</p>
<hr>
<div class="row" style="justify-content:space-between"><span>Tickets emitidos</span><span>147</span></div>
<div class="row" style="justify-content:space-between"><span>Anulados</span><span>2</span></div>
<div class="row" style="justify-content:space-between"><span>Reembolsos</span><span>1</span></div>
<hr>
<div class="row" style="justify-content:space-between"><span>Tarjeta</span><span>1.842,30</span></div>
<div class="row" style="justify-content:space-between"><span>Efectivo</span><span>684,50</span></div>
<div class="row" style="justify-content:space-between"><span>Bizum</span><span>312,80</span></div>
<hr>
<div class="row title lg" style="justify-content:space-between"><span>TOTAL</span><span>€2.839,60</span></div>
<p class="meta text-center" style="margin-top:var(--space-4)">Caja inicial: €100,00 · Final: €784,50<br>Diferencia: ✓ cuadrada</p>
</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 ... />