# Invoice · MIAN

A printable invoice or receipt: parties, line items, totals with tax, and payment notes.

- Id: `invoice` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/invoice
- Use for: invoice, receipt, bill, order summary, printable document.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-invoice`: The document. Add mn-card for the noodle’s surface.
- `mn-invoice-head`: Title, number and dates (a <dl>).
- `mn-invoice-parties`: From / Bill to (<address>).
- `mn-invoice-totals`: Subtotal, tax and total (<dl>); mn-invoice-total on the last pair.
- `mn-invoice-foot`: Payment terms and notes.

## Accessibility

- Use a real <table> with column headers for line items, and <address> for the parties.
- The total must be in text, not only emphasised; print styles keep it on paper.

## Examples

### Invoice

```html
<article class="mn-card mn-invoice" style="max-width:44rem" aria-labelledby="inv-t">
  <header class="mn-invoice-head"><div><h2 id="inv-t">Invoice</h2><span class="mn-muted">Ledger GmbH · VAT DE318 442 910</span></div>
    <dl><dt>Number</dt><dd>2026-0419</dd><dt>Issued</dt><dd>25 Sep 2026</dd><dt>Due</dt><dd>9 Oct 2026</dd></dl></header>
  <div class="mn-invoice-parties"><div><h3>From</h3><address>Ledger GmbH<br>Torstraße 12<br>10119 Berlin, Germany</address></div><div><h3>Bill to</h3><address>Halden &amp; Co SRL<br>Str. Memorandumului 28<br>400114 Cluj-Napoca, Romania</address></div></div>
  <div class="mn-table-wrap"><table class="mn-table"><thead><tr><th scope="col">Description</th><th scope="col" class="mn-num">Qty</th><th scope="col" class="mn-num">Price</th><th scope="col" class="mn-num">Amount</th></tr></thead>
  <tbody><tr><td>Team plan, October</td><td class="mn-num">1</td><td class="mn-num">€190.00</td><td class="mn-num">€190.00</td></tr><tr><td>Extra entities</td><td class="mn-num">4</td><td class="mn-num">€25.00</td><td class="mn-num">€100.00</td></tr><tr><td>API calls over plan (4,210)</td><td class="mn-num">4.21</td><td class="mn-num">€0.40</td><td class="mn-num">€1.68</td></tr></tbody></table></div>
  <dl class="mn-invoice-totals"><dt>Subtotal</dt><dd>€291.68</dd><dt>VAT (reverse charge)</dt><dd>€0.00</dd><dt class="mn-invoice-total">Total due</dt><dd class="mn-invoice-total">€291.68</dd></dl>
  <p class="mn-invoice-foot">Pay by SEPA transfer to DE44 1001 0010 0123 4567 89, reference 2026-0419. VAT reverse charge, Art. 196 Directive 2006/112/EC.</p>
</article>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/invoice/source