Invoice

Documento factura / presupuesto. Construido a partir de primitivos: no existe ningún componente Invoice en OutfitKit. Una factura es composición pura de un Card + .table + clases universales (.head, .body, .title, .sub, .label, .value, .meta, .row, .col). Consulta el ejemplo completo en examples/domain/invoice.html.

Composición: Card spacious como contenedor + bloques .head.row, .body.row + .table + totales en columna a la derecha con .row entre .meta y .value.

Factura completa

OutfitKit · Iberia

OutfitKit Software S.L.
Calle Velázquez 28, 28001 Madrid
CIF B-87654321 · ES12 3456 7890 1234

Factura

NºF-2026-0184

Emisión14/05/2026

Vencimiento13/06/2026

EstadoPendiente

Facturar aNorden Bikes S.L.

Avda. Diagonal 442, 08037 Barcelona
CIF B-12345678 · contact@nordenbikes.com
At. Roser Camps · Compras

Enviar aAlmacén Norden — Zona Franca

Carrer 60 Z, 08040 Barcelona
Recepción: lun-vie 08:00–14:00
Pedido: PO-2026-0042

Concepto	Cant.	Precio	Dto.	IVA	Total
Bicicleta urbana B-Línea (FG-BIK-001) Lote LOT-2026-W19-184 · 12 ud	12	€384,20	5%	21%	€4.378,03
Servicio de montaje en tienda 2 técnicos · 4 horas	8 h	€42,00	—	21%	€336,00
Transporte refrigerado Madrid → Barcelona	1	€98,00	—	21%	€98,00

Notas

Pago a 30 días por transferencia. Descuento 2,5% si se paga en los primeros 10 días.

Subtotal€4.812,03

Descuento−€242,64

Base imponible€4.569,39

IVA 21%€959,57

Total€5.390,74

<div class="card spacious" style="width:100%">
  <header class="head row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col" style="flex:1">
      <h2 class="title 2xl">OutfitKit · Iberia</h2>
      <p class="sub">OutfitKit Software S.L.<br>Calle Velázquez 28, 28001 Madrid<br>CIF B-87654321 · ES12 3456 7890 1234</p>
    </div>
    <div class="col meta" style="text-align:right;align-items:flex-end">
      <span class="title lg">Factura</span>
      <div class="row" style="--gap: var(--space-4)"><span>Nº</span><b>F-2026-0184</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Emisión</span><b>14/05/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Vencimiento</span><b>13/06/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Estado</span><span class="chip warn">Pendiente</span></div>
    </div>
  </header>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start; border-bottom: var(--border-w) solid var(--line);">
    <div class="col" style="flex:1">
      <span class="label">Facturar a</span><span class="value">Norden Bikes S.L.</span>
      <p class="sub">Avda. Diagonal 442, 08037 Barcelona<br>CIF B-12345678 · contact@nordenbikes.com<br>At. Roser Camps · Compras</p>
    </div>
    <div class="col" style="flex:1">
      <span class="label">Enviar a</span><span class="value">Almacén Norden — Zona Franca</span>
      <p class="sub">Carrer 60 Z, 08040 Barcelona<br>Recepción: lun-vie 08:00–14:00<br>Pedido: PO-2026-0042</p>
    </div>
  </section>

  <table class="table">
    <thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Dto.</th><th>IVA</th><th>Total</th></tr></thead>
    <tbody>
      <tr><td>Bicicleta urbana B-Línea (FG-BIK-001)<br><small>Lote LOT-2026-W19-184 · 12 ud</small></td><td>12</td><td>€384,20</td><td>5%</td><td>21%</td><td>€4.378,03</td></tr>
      <tr><td>Servicio de montaje en tienda<br><small>2 técnicos · 4 horas</small></td><td>8 h</td><td>€42,00</td><td>—</td><td>21%</td><td>€336,00</td></tr>
      <tr><td>Transporte refrigerado Madrid → Barcelona</td><td>1</td><td>€98,00</td><td>—</td><td>21%</td><td>€98,00</td></tr>
    </tbody>
  </table>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col meta" style="flex:1">
      <span class="label">Notas</span>
      <p>Pago a 30 días por transferencia. Descuento 2,5% si se paga en los primeros 10 días.</p>
    </div>
    <div class="col" style="width:280px">
      <div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€4.812,03</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Descuento</span><span>−€242,64</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Base imponible</span><span>€4.569,39</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">IVA 21%</span><span>€959,57</span></div>
      <div class="row title lg" style="justify-content:space-between;border-top:var(--border-w) solid var(--line);padding-top:var(--space-3);margin-top:var(--space-2)">
        <span>Total</span><span>€5.390,74</span>
      </div>
    </div>
  </section>
</div>

<Card attrs={"class": "spacious"}>
  <header class="head row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col" style="flex:1">
      <h2 class="title 2xl">OutfitKit · Iberia</h2>
      <p class="sub">
        OutfitKit Software S.L.<br>
        Calle Velázquez 28, 28001 Madrid<br>
        CIF B-87654321 · ES12 3456 7890 1234
      </p>
    </div>
    <div class="col meta" style="text-align:right;align-items:flex-end">
      <span class="title lg">Factura</span>
      <div class="row" style="--gap: var(--space-4)"><span>Nº</span><b>F-2026-0184</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Emisión</span><b>14/05/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Vencimiento</span><b>13/06/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Estado</span><Chip color="warn">Pendiente</Chip></div>
    </div>
  </header>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start; border-bottom: var(--border-w) solid var(--line);">
    <div class="col" style="flex:1">
      <span class="label">Facturar a</span>
      <span class="value">Norden Bikes S.L.</span>
      <p class="sub">Avda. Diagonal 442, 08037 Barcelona<br>CIF B-12345678 · contact@nordenbikes.com<br>At. Roser Camps · Compras</p>
    </div>
    <div class="col" style="flex:1">
      <span class="label">Enviar a</span>
      <span class="value">Almacén Norden — Zona Franca</span>
      <p class="sub">Carrer 60 Z, 08040 Barcelona<br>Recepción: lun-vie 08:00–14:00<br>Pedido: PO-2026-0042</p>
    </div>
  </section>

  <table class="table">
    <thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Dto.</th><th>IVA</th><th>Total</th></tr></thead>
    <tbody>
      <tr><td>Bicicleta urbana B-Línea (FG-BIK-001)<br><small>Lote LOT-2026-W19-184 · 12 ud</small></td><td>12</td><td>€384,20</td><td>5%</td><td>21%</td><td>€4.378,03</td></tr>
      <tr><td>Servicio de montaje en tienda<br><small>2 técnicos · 4 horas</small></td><td>8 h</td><td>€42,00</td><td>—</td><td>21%</td><td>€336,00</td></tr>
      <tr><td>Transporte refrigerado Madrid → Barcelona</td><td>1</td><td>€98,00</td><td>—</td><td>21%</td><td>€98,00</td></tr>
    </tbody>
  </table>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col meta" style="flex:1">
      <span class="label">Notas</span>
      <p>Pago a 30 días por transferencia. Descuento 2,5% si se paga en los primeros 10 días.</p>
    </div>
    <div class="col" style="width:280px">
      <div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€4.812,03</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Descuento</span><span>−€242,64</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Base imponible</span><span>€4.569,39</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">IVA 21%</span><span>€959,57</span></div>
      <div class="row title lg" style="justify-content:space-between;border-top:var(--border-w) solid var(--line);padding-top:var(--space-3);margin-top:var(--space-2)">
        <span>Total</span><span>€5.390,74</span>
      </div>
    </div>
  </section>
</Card>

<Card attrs={"class": "spacious"}>
  <header class="head row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col" style="flex:1">
      <h2 class="title 2xl">OutfitKit · Iberia</h2>
      <p class="sub">
        OutfitKit Software S.L.<br>
        Calle Velázquez 28, 28001 Madrid<br>
        CIF B-87654321 · ES12 3456 7890 1234
      </p>
    </div>
    <div class="col meta" style="text-align:right;align-items:flex-end">
      <span class="title lg">Factura</span>
      <div class="row" style="--gap: var(--space-4)"><span>Nº</span><b>F-2026-0184</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Emisión</span><b>14/05/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Vencimiento</span><b>13/06/2026</b></div>
      <div class="row" style="--gap: var(--space-4)"><span>Estado</span><Chip color="warn">Pendiente</Chip></div>
    </div>
  </header>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start; border-bottom: var(--border-w) solid var(--line);">
    <div class="col" style="flex:1">
      <span class="label">Facturar a</span>
      <span class="value">Norden Bikes S.L.</span>
      <p class="sub">Avda. Diagonal 442, 08037 Barcelona<br>CIF B-12345678 · contact@nordenbikes.com<br>At. Roser Camps · Compras</p>
    </div>
    <div class="col" style="flex:1">
      <span class="label">Enviar a</span>
      <span class="value">Almacén Norden — Zona Franca</span>
      <p class="sub">Carrer 60 Z, 08040 Barcelona<br>Recepción: lun-vie 08:00–14:00<br>Pedido: PO-2026-0042</p>
    </div>
  </section>

  <table class="table">
    <thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Dto.</th><th>IVA</th><th>Total</th></tr></thead>
    <tbody>
      <tr><td>Bicicleta urbana B-Línea (FG-BIK-001)<br><small>Lote LOT-2026-W19-184 · 12 ud</small></td><td>12</td><td>€384,20</td><td>5%</td><td>21%</td><td>€4.378,03</td></tr>
      <tr><td>Servicio de montaje en tienda<br><small>2 técnicos · 4 horas</small></td><td>8 h</td><td>€42,00</td><td>—</td><td>21%</td><td>€336,00</td></tr>
      <tr><td>Transporte refrigerado Madrid → Barcelona</td><td>1</td><td>€98,00</td><td>—</td><td>21%</td><td>€98,00</td></tr>
    </tbody>
  </table>

  <section class="body row" style="--gap: var(--space-6); --align: flex-start;">
    <div class="col meta" style="flex:1">
      <span class="label">Notas</span>
      <p>Pago a 30 días por transferencia. Descuento 2,5% si se paga en los primeros 10 días.</p>
    </div>
    <div class="col" style="width:280px">
      <div class="row" style="justify-content:space-between"><span class="meta">Subtotal</span><span>€4.812,03</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Descuento</span><span>−€242,64</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">Base imponible</span><span>€4.569,39</span></div>
      <div class="row" style="justify-content:space-between"><span class="meta">IVA 21%</span><span>€959,57</span></div>
      <div class="row title lg" style="justify-content:space-between;border-top:var(--border-w) solid var(--line);padding-top:var(--space-3);margin-top:var(--space-2)">
        <span>Total</span><span>€5.390,74</span>
      </div>
    </div>
  </section>
</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 ... />