Invoice template

<!doctype html><html><head><meta charset="utf-8"><title>Invoice {{number}}</title><style>
  *{box-sizing:border-box}
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{margin:0;font-family:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", "DejaVu Sans", sans-serif;color:#16181d;font-size:14px;line-height:1.5;text-rendering:geometricPrecision}
  table{width:100%;border-collapse:collapse}
  th{text-align:left;font-weight:700;color:#3d424a;font-size:12px;padding:0 0 8px;border-bottom:1.5px solid #16181d}
  td{padding:11px 0;border-bottom:1px solid #d9dbd6;vertical-align:top}
  tr{break-inside:avoid}
  .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .muted{color:#4f545c}
  .label{font-size:12px;font-weight:700;color:#4f545c;margin-bottom:4px}

  header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:28px;margin-bottom:28px;border-bottom:1.5px solid #16181d}
  .brand{font-size:24px;font-weight:700;letter-spacing:-.02em}
  .brand small{display:block;font-size:13px;font-weight:400;color:#4f545c;letter-spacing:0;margin-top:2px}
  h1{font-size:36px;line-height:1;margin:0;font-weight:700;letter-spacing:-.03em;text-align:right}
  .meta-r{text-align:right;margin-top:8px;color:#4f545c}
  .parties{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:36px}
  .totals{margin-left:auto;width:52%;margin-top:20px}
  .totals td{border:0;padding:5px 0}
  .grand td{border-top:1.5px solid #16181d;padding-top:12px;font-size:20px;font-weight:700}
  footer{margin-top:48px;padding-top:16px;border-top:1px solid #d9dbd6;font-size:13px;color:#4f545c}
</style></head><body>
<header>
  <div class="brand">{{seller.name}}<small>{{seller.address}}</small></div>
  <div><h1>{{#title}}{{title}}{{/title}}{{^title}}Invoice{{/title}}</h1><div class="meta-r">{{number}}</div></div>
</header>
<div class="parties">
  <div><div class="label">Billed to</div>{{customer.name}}<br>{{customer.address}}{{#customer.vat}}<br>VAT {{customer.vat}}{{/customer.vat}}</div>
  <div><div class="label">From</div>{{seller.name}}{{#seller.vat}}<br>VAT {{seller.vat}}{{/seller.vat}}</div>
  <div><div class="label">Dates</div>Issued {{date}}{{#supplyDate}}<br>Supplied {{supplyDate}}{{/supplyDate}}{{#due}}<br>Due {{due}}{{/due}}{{#buyerReference}}<br>Your ref. {{buyerReference}}{{/buyerReference}}{{#precedingInvoice}}<br>Corrects {{precedingInvoice}}{{/precedingInvoice}}</div>
</div>
<table><thead><tr><th>Description</th><th class="num">Qty</th><th class="num">Unit price</th><th class="num">Amount</th></tr></thead>
<tbody>{{#items}}<tr><td>{{description}}{{#detail}}<div class="muted" style="font-size:12.5px">{{detail}}</div>{{/detail}}</td><td class="num">{{qty}}</td><td class="num">{{unit}}</td><td class="num">{{amount}}</td></tr>{{/items}}</tbody></table>
<table class="totals"><tr><td>Subtotal</td><td class="num">{{subtotal}}</td></tr>
{{#vatBreakdown}}<tr><td>{{label}}{{#multi}} on {{taxable}}{{/multi}}</td><td class="num">{{amount}}</td></tr>{{/vatBreakdown}}{{^vatBreakdown}}<tr><td>VAT {{vatRate}}</td><td class="num">{{vat}}</td></tr>{{/vatBreakdown}}
{{#paid}}<tr><td>Total</td><td class="num">{{total}}</td></tr><tr><td>Paid</td><td class="num">−{{paid}}</td></tr><tr class="grand"><td>{{#totalLabel}}{{totalLabel}}{{/totalLabel}}{{^totalLabel}}Total due{{/totalLabel}}</td><td class="num">{{amountDue}}</td></tr>{{/paid}}
{{^paid}}<tr class="grand"><td>{{#totalLabel}}{{totalLabel}}{{/totalLabel}}{{^totalLabel}}Total due{{/totalLabel}}</td><td class="num">{{total}}</td></tr>{{/paid}}</table>
{{#vatNotes}}<p class="muted" style="margin:16px 0 0;text-align:right">{{.}}</p>{{/vatNotes}}
<footer>{{^isCreditNote}}{{#seller.iban}}Please pay{{#due}} by {{due}}{{/due}} to IBAN {{seller.iban}}, quoting {{#paymentReference}}{{paymentReference}}{{/paymentReference}}{{^paymentReference}}{{number}}{{/paymentReference}}. {{/seller.iban}}{{/isCreditNote}}{{terms}} {{note}}</footer>
</body></html>