Open demo

CSS code

HTML 
<div><span class="lbl">Brand colour band with a totals card</span>
<article class="mi" aria-labelledby="mi1-title">
  <header class="mi-band">
    <div>
      <p class="mi-logo"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 18l4-5 3 3 5-7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>Lumen Analytics</p>
    </div>
    <div><h2 id="mi1-title">Invoice</h2><p class="mi-num">LA-10388</p></div>
  </header>
  <div class="mi-body">
    <div class="mi-parties">
      <div><h3 class="mi-k">From</h3><address><strong>Lumen Analytics Inc.</strong>500 Alder Street, Floor 3<br>Seattle, WA 98104<br>[email protected]</address></div>
      <div><h3 class="mi-k">Bill to</h3><address><strong>Orchard Lane Bakery</strong>Priya Natarajan<br>12 Orchard Lane<br>Tacoma, WA 98402</address></div>
      <div><h3 class="mi-k">Dates</h3><dl class="mi-dates"><div><dt>Issued</dt><dd>1 Oct 2026</dd></div><div><dt>Due</dt><dd>31 Oct 2026</dd></div><div><dt>Customer ID</dt><dd>C-2291</dd></div></dl></div>
    </div>
    <table class="mi-table">
      <caption>Subscription and services</caption>
      <thead><tr><th scope="col">Item</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Price</th><th scope="col" class="num">Amount</th></tr></thead>
      <tbody>
        <tr><th scope="row">Growth plan, annual<span>1 Oct 2026 – 30 Sep 2027</span></th><td class="num">1</td><td class="num">$2,388.00</td><td class="num">$2,388.00</td></tr>
        <tr><th scope="row">Additional seats<span>4 × $108.00 per year</span></th><td class="num">4</td><td class="num">$108.00</td><td class="num">$432.00</td></tr>
        <tr><th scope="row">Data warehouse connector<span>Annual add-on</span></th><td class="num">1</td><td class="num">$360.00</td><td class="num">$360.00</td></tr>
        <tr><th scope="row">Onboarding workshop<span>2 hours, remote</span></th><td class="num">2</td><td class="num">$150.00</td><td class="num">$300.00</td></tr>
      </tbody>
    </table>
    <div class="mi-end">
      <div class="mi-note"><h3 class="mi-k">Payment</h3>
        <p>Pay by card or ACH from the billing portal, or by wire to account •••• 6610, reference LA-10388.</p>
        <p>Questions about this invoice? Email <a href="mailto:[email protected]">[email protected]</a>.</p></div>
      <dl class="mi-card">
        <div><dt>Subtotal</dt><dd>$3,480.00</dd></div>
        <div><dt>Tax (8.25%)</dt><dd>$287.10</dd></div>
        <div><dt>Paid</dt><dd>$0.00</dd></div>
        <div class="mi-total"><dt>Amount due</dt><dd>$3,767.10</dd></div>
      </dl>
    </div>
  </div>
</article>
</div>
<div><span class="lbl">Side band with amount due and a pay link</span>
<article class="mi mi--split mi-break" aria-labelledby="mi2-title">
  <header class="mi-band">
    <div><p class="mi-logo"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect x="2" y="7" width="24" height="17" rx="4" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="14" cy="15.5" r="4.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 7l2-3h4l2 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Northline Photo</p>
      <h2 id="mi2-title" style="margin-top:22px">Invoice</h2><p class="mi-num" style="font-size:1.35rem">NP-2219</p></div>
    <div class="mi-due"><p>Amount due</p><p class="mi-num">$3,290.00</p><p>by 30 Nov 2026</p></div>
    <a class="mi-pay" href="https://pay.northline.example/NP-2219">Pay online<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </header>
  <div class="mi-body">
    <div class="mi-parties">
      <div><h3 class="mi-k">Bill to</h3><address><strong>Juniper & Sage Events</strong>Laila Haddad<br>304 Cedar Row<br>Spokane, WA 99201</address></div>
      <div><h3 class="mi-k">Event</h3><dl class="mi-dates"><div><dt>Date</dt><dd>24 Oct 2026</dd></div><div><dt>Venue</dt><dd>Hollow Pine Farm</dd></div><div><dt>Issued</dt><dd>31 Oct 2026</dd></div></dl></div>
    </div>
    <table class="mi-table">
      <caption>Wedding photography</caption>
      <thead><tr><th scope="col">Item</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Price</th><th scope="col" class="num">Amount</th></tr></thead>
      <tbody>
        <tr><th scope="row">Full-day coverage<span>8 hours, two locations</span></th><td class="num">1</td><td class="num">$3,200.00</td><td class="num">$3,200.00</td></tr>
        <tr><th scope="row">Second shooter<span>Hourly</span></th><td class="num">6</td><td class="num">$75.00</td><td class="num">$450.00</td></tr>
        <tr><th scope="row">Fine-art album<span>30 × 30 cm, 40 pages</span></th><td class="num">1</td><td class="num">$640.00</td><td class="num">$640.00</td></tr>
      </tbody>
    </table>
    <div class="mi-end">
      <dl class="mi-card">
        <div><dt>Subtotal</dt><dd>$4,290.00</dd></div>
        <div class="mi-paid"><dt>Deposit paid 2 Mar</dt><dd>−$1,000.00</dd></div>
        <div class="mi-total"><dt>Amount due</dt><dd>$3,290.00</dd></div>
      </dl>
    </div>
  </div>
</article>
</div>
CSS 
/* Modern minimal invoice: a brand colour band, generous white space and a totals card. print-color-adjust:exact
   keeps the band and the card tint when printing or saving as PDF. Change --mi-brand and --mi-brand-2 for your colours. */
.mi{--mi-brand:#4338ca;--mi-brand-2:#6d28d9;--mi-ink:#191a2c;--mi-muted:#575a73;--mi-line:#e3e5ef;--mi-soft:#f5f5fc;--mi-tint:#eef0ff;
  box-sizing:border-box;max-width:820px;margin:0 auto;background:#fff;color:var(--mi-ink);font-size:14px;line-height:1.55;border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(25,26,44,.06),0 30px 60px -36px rgba(67,56,202,.45);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mi *,.mi *::before,.mi *::after{box-sizing:border-box}
:where(.mi) :is(h2,h3,p,dl,dd,table,address){margin:0}
.mi a:focus-visible{outline:2px solid var(--mi-brand);outline-offset:3px;border-radius:4px}
.mi-band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;padding:34px 44px;color:#fff;
  background:linear-gradient(115deg,var(--mi-brand),var(--mi-brand-2))}
.mi-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.mi-band h2{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.mi-num{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.mi-body{padding:36px 44px 40px}
.mi-parties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:30px}
.mi-k{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mi-muted);margin-bottom:6px}
.mi-parties address{font-style:normal;color:var(--mi-muted)}
.mi-parties strong{display:block;color:var(--mi-ink)}
.mi-dates{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.mi-dates div{display:flex;justify-content:space-between;gap:12px}
.mi-dates dt{color:var(--mi-muted)}
.mi-dates dd{font-weight:600}
.mi-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mi-table caption{text-align:left;font-weight:700;font-size:1rem;padding-bottom:10px}
.mi-table thead th{padding:10px 12px;background:var(--mi-soft);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mi-muted);text-align:left}
.mi-table thead th:first-child{border-radius:10px 0 0 10px}
.mi-table thead th:last-child{border-radius:0 10px 10px 0}
.mi-table tbody :is(th,td){padding:16px 12px;border-bottom:1px solid var(--mi-line);text-align:left;font-weight:400;vertical-align:top}
.mi-table tbody th{font-weight:600}
.mi-table tbody th span{display:block;font-weight:400;color:var(--mi-muted);font-size:.86rem}
.mi-table .num{text-align:right;white-space:nowrap}
.mi-end{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-top:28px}
.mi-note{color:var(--mi-muted)}
.mi-note p+p{margin-top:8px}
.mi-note a{color:var(--mi-brand);font-weight:600}
.mi-card{padding:20px 22px;border-radius:16px;background:var(--mi-tint);font-variant-numeric:tabular-nums}
.mi-card div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.mi-card dt{color:var(--mi-muted)}
.mi-card dd{font-weight:600}
.mi-card .mi-total{margin-top:10px;padding-top:14px;border-top:1px solid #cfd2f5}
.mi-card .mi-total dt{color:var(--mi-ink);font-weight:700;align-self:center}
.mi-card .mi-total dd{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--mi-brand)}
/* split variant: the band becomes a side column */
.mi--split{display:grid;grid-template-columns:250px minmax(0,1fr)}
.mi--split .mi-band{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:28px;padding:34px 28px;background:linear-gradient(170deg,var(--mi-brand-2),var(--mi-brand))}
.mi-due{display:grid;gap:2px}
.mi-due .mi-num{font-size:2.1rem}
.mi-due p{opacity:.92}
.mi-pay{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:#fff;color:var(--mi-brand);font-weight:700;text-decoration:none;transition:transform .15s}
.mi-pay:hover{transform:translateY(-1px)}
.mi .mi-pay:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
.mi--split .mi-parties{grid-template-columns:repeat(2,minmax(0,1fr))}
.mi--split .mi-end{grid-template-columns:1fr}
.mi--split .mi-card{margin-left:auto;width:100%;max-width:340px}
.mi-paid dd{color:#166534}
@media (max-width:720px){
  .mi-band,.mi-body{padding-left:22px;padding-right:22px}
  .mi-parties,.mi--split .mi-parties{grid-template-columns:1fr 1fr}
  .mi-end{grid-template-columns:1fr}
  .mi--split{grid-template-columns:1fr}
  .mi--split .mi-band{padding:28px 22px}
}
@media (max-width:480px){
  .mi{font-size:13px}
  .mi-parties,.mi--split .mi-parties{grid-template-columns:1fr}
  .mi-table thead th,.mi-table tbody :is(th,td){padding-left:6px;padding-right:6px}
}
@page{size:auto;margin:12mm}
@media print{
  .mi{box-shadow:none;border-radius:0;max-width:none;font-size:10pt}
  .mi-break{break-before:page}
  .mi-table thead{display:table-header-group}
  .mi-table tr,.mi-end{break-inside:avoid}
  .mi-pay{display:none}
}
@media (prefers-reduced-motion:reduce){.mi-pay{transition:none}.mi-pay:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Brand colour band with a totals card</span>
<article class="mi card" aria-labelledby="mi1-title">
  <header class="mi-band d-flex flex-wrap justify-content-between align-items-end gap-3">
    <p class="d-flex align-items-center gap-2 fw-bold fs-6"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 18l4-5 3 3 5-7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>Lumen Analytics</p>
    <div><h2 id="mi1-title">Invoice</h2><p class="mi-num">LA-10388</p></div>
  </header>
  <div class="card-body">
    <div class="row g-4 pb-4 mb-1">
      <div class="col-sm-6 col-md-4"><h3 class="mi-k">From</h3><address><strong class="d-block text-body">Lumen Analytics Inc.</strong>500 Alder Street, Floor 3<br>Seattle, WA 98104<br>[email protected]</address></div>
      <div class="col-sm-6 col-md-4"><h3 class="mi-k">Bill to</h3><address><strong class="d-block text-body">Orchard Lane Bakery</strong>Priya Natarajan<br>12 Orchard Lane<br>Tacoma, WA 98402</address></div>
      <div class="col-sm-6 col-md-4"><h3 class="mi-k">Dates</h3><dl class="d-grid gap-1"><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Issued</dt><dd class="fw-semibold">1 Oct 2026</dd></div><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Due</dt><dd class="fw-semibold">31 Oct 2026</dd></div><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Customer ID</dt><dd class="fw-semibold">C-2291</dd></div></dl></div>
    </div>
    <table class="table caption-top">
      <caption>Subscription and services</caption>
      <thead><tr><th scope="col">Item</th><th scope="col" class="text-end">Qty</th><th scope="col" class="text-end">Price</th><th scope="col" class="text-end">Amount</th></tr></thead>
      <tbody>
        <tr><th scope="row" class="fw-semibold">Growth plan, annual<span class="d-block fw-normal small text-body-secondary">1 Oct 2026 – 30 Sep 2027</span></th><td class="text-end">1</td><td class="text-end text-nowrap">$2,388.00</td><td class="text-end text-nowrap">$2,388.00</td></tr>
        <tr><th scope="row" class="fw-semibold">Additional seats<span class="d-block fw-normal small text-body-secondary">4 × $108.00 per year</span></th><td class="text-end">4</td><td class="text-end text-nowrap">$108.00</td><td class="text-end text-nowrap">$432.00</td></tr>
        <tr><th scope="row" class="fw-semibold">Data warehouse connector<span class="d-block fw-normal small text-body-secondary">Annual add-on</span></th><td class="text-end">1</td><td class="text-end text-nowrap">$360.00</td><td class="text-end text-nowrap">$360.00</td></tr>
        <tr><th scope="row" class="fw-semibold">Onboarding workshop<span class="d-block fw-normal small text-body-secondary">2 hours, remote</span></th><td class="text-end">2</td><td class="text-end text-nowrap">$150.00</td><td class="text-end text-nowrap">$300.00</td></tr>
      </tbody>
    </table>
    <div class="mi-end row g-4 mt-2 align-items-start">
      <div class="col-md mi-note text-body-secondary"><h3 class="mi-k">Payment</h3>
        <p class="mb-2">Pay by card or ACH from the billing portal, or by wire to account •••• 6610, reference LA-10388.</p>
        <p>Questions about this invoice? Email <a href="mailto:[email protected]">[email protected]</a>.</p></div>
      <div class="col-md-auto" style="min-width:300px;max-width:100%">
        <dl class="mi-card px-4 py-3">
          <div class="d-flex justify-content-between py-1"><dt>Subtotal</dt><dd>$3,480.00</dd></div>
          <div class="d-flex justify-content-between py-1"><dt>Tax (8.25%)</dt><dd>$287.10</dd></div>
          <div class="d-flex justify-content-between py-1"><dt>Paid</dt><dd>$0.00</dd></div>
          <div class="mi-total d-flex justify-content-between align-items-center mt-2 pt-3"><dt class="fw-bold text-body">Amount due</dt><dd>$3,767.10</dd></div>
        </dl>
      </div>
    </div>
  </div>
</article>
</div>
<div><span class="lbl">Side band with amount due and a pay link</span>
<article class="mi mi-split mi-break card" aria-labelledby="mi2-title">
  <header class="mi-band mi-split-band d-flex flex-column align-items-start justify-content-between gap-4">
    <div><p class="d-flex align-items-center gap-2 fw-bold fs-6"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect x="2" y="7" width="24" height="17" rx="4" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="14" cy="15.5" r="4.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 7l2-3h4l2 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Northline Photo</p>
      <h2 id="mi2-title" class="mt-4">Invoice</h2><p class="mi-num fs-4">NP-2219</p></div>
    <div><p>Amount due</p><p class="mi-num" style="font-size:2.1rem">$3,290.00</p><p>by 30 Nov 2026</p></div>
    <a class="btn btn-light d-inline-flex align-items-center gap-2 d-print-none" href="https://pay.northline.example/NP-2219">Pay online<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </header>
  <div class="card-body">
    <div class="row g-4 pb-4 mb-1">
      <div class="col-sm-6"><h3 class="mi-k">Bill to</h3><address><strong class="d-block text-body">Juniper & Sage Events</strong>Laila Haddad<br>304 Cedar Row<br>Spokane, WA 99201</address></div>
      <div class="col-sm-6"><h3 class="mi-k">Event</h3><dl class="d-grid gap-1"><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Date</dt><dd class="fw-semibold">24 Oct 2026</dd></div><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Venue</dt><dd class="fw-semibold">Hollow Pine Farm</dd></div><div class="d-flex justify-content-between gap-3"><dt class="fw-normal text-body-secondary">Issued</dt><dd class="fw-semibold">31 Oct 2026</dd></div></dl></div>
    </div>
    <table class="table caption-top">
      <caption>Wedding photography</caption>
      <thead><tr><th scope="col">Item</th><th scope="col" class="text-end">Qty</th><th scope="col" class="text-end">Price</th><th scope="col" class="text-end">Amount</th></tr></thead>
      <tbody>
        <tr><th scope="row" class="fw-semibold">Full-day coverage<span class="d-block fw-normal small text-body-secondary">8 hours, two locations</span></th><td class="text-end">1</td><td class="text-end text-nowrap">$3,200.00</td><td class="text-end text-nowrap">$3,200.00</td></tr>
        <tr><th scope="row" class="fw-semibold">Second shooter<span class="d-block fw-normal small text-body-secondary">Hourly</span></th><td class="text-end">6</td><td class="text-end text-nowrap">$75.00</td><td class="text-end text-nowrap">$450.00</td></tr>
        <tr><th scope="row" class="fw-semibold">Fine-art album<span class="d-block fw-normal small text-body-secondary">30 × 30 cm, 40 pages</span></th><td class="text-end">1</td><td class="text-end text-nowrap">$640.00</td><td class="text-end text-nowrap">$640.00</td></tr>
      </tbody>
    </table>
    <div class="mi-end d-flex justify-content-end mt-4">
      <dl class="mi-card px-4 py-3 w-100" style="max-width:340px">
        <div class="d-flex justify-content-between py-1"><dt>Subtotal</dt><dd>$4,290.00</dd></div>
        <div class="d-flex justify-content-between py-1"><dt>Deposit paid 2 Mar</dt><dd style="color:#166534">−$1,000.00</dd></div>
        <div class="mi-total d-flex justify-content-between align-items-center mt-2 pt-3"><dt class="fw-bold text-body">Amount due</dt><dd>$3,290.00</dd></div>
      </dl>
    </div>
  </div>
</article>
</div>
CSS 
/* Bootstrap .card, .row/.col, .table and .btn, retuned through Bootstrap's CSS variables, plus the brand band.
   print-color-adjust:exact keeps the band and the totals tint when printing. Change --mi-brand and --mi-brand-2. */
.mi{--mi-brand:#4338ca;--mi-brand-2:#6d28d9;--mi-ink:#191a2c;--mi-muted:#575a73;--mi-line:#e3e5ef;--mi-soft:#f5f5fc;--mi-tint:#eef0ff;
  --bs-card-border-width:0;--bs-card-border-radius:20px;--bs-card-inner-border-radius:20px;--bs-body-color:var(--mi-ink);--bs-secondary-color:var(--mi-muted);
  max-width:820px;margin:0 auto;color:var(--mi-ink);font-size:14px;line-height:1.55;overflow:hidden;
  box-shadow:0 1px 2px rgba(25,26,44,.06),0 30px 60px -36px rgba(67,56,202,.45);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mi :is(h2,h3,p,dl,dd,address){margin:0}
.mi a:focus-visible{outline:2px solid var(--mi-brand);outline-offset:3px;border-radius:4px;box-shadow:none}
.mi-band{color:#fff;padding:34px 44px;background:linear-gradient(115deg,var(--mi-brand),var(--mi-brand-2))}
.mi-band h2{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.mi-num{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.mi .card-body{padding:36px 44px 40px}
.mi-k{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mi-muted);margin-bottom:6px!important}
.mi address{font-style:normal;color:var(--mi-muted)}
.mi .table{--bs-table-bg:transparent;--bs-table-color:var(--mi-ink);--bs-table-border-color:var(--mi-line);font-variant-numeric:tabular-nums;margin:0}
.mi .table caption{color:var(--mi-ink);font-weight:700;font-size:1rem;padding:0 0 10px}
.mi .table thead th{padding:10px 12px;background:var(--mi-soft);border:0;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mi-muted)}
.mi .table thead th:first-child{border-radius:10px 0 0 10px}
.mi .table thead th:last-child{border-radius:0 10px 10px 0}
.mi .table tbody>tr>*{padding:16px 12px;vertical-align:top}
.mi-card{background:var(--mi-tint);border-radius:16px;font-variant-numeric:tabular-nums}
.mi-card dt{font-weight:400;color:var(--mi-muted)}
.mi-card dd{font-weight:600}
.mi-total{border-top:1px solid #cfd2f5}
.mi-total dd{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--mi-brand)}
.mi-note a{color:var(--mi-brand);font-weight:600}
.mi-split-band{background:linear-gradient(170deg,var(--mi-brand-2),var(--mi-brand))}
.mi .btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-color:var(--mi-brand);--bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--mi-brand);--bs-btn-font-weight:700;
  --bs-btn-padding-x:18px;--bs-btn-padding-y:11px;--bs-btn-border-radius:999px;transition:transform .15s}
.mi .btn-light:hover{transform:translateY(-1px)}
.mi .btn-light:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:none;border-radius:999px}
@media (min-width:721px){.mi-split{display:grid;grid-template-columns:250px minmax(0,1fr)}.mi-split .mi-band{padding:34px 28px}}
@media (max-width:720px){.mi-band,.mi .card-body{padding-left:22px;padding-right:22px}}
@media (max-width:480px){.mi{font-size:13px}.mi .table>:not(caption)>*>*{padding-left:6px;padding-right:6px}}
@page{size:auto;margin:12mm}
@media print{
  .mi{box-shadow:none;border-radius:0;max-width:none;font-size:10pt}
  .mi-break{break-before:page}
  .mi .table thead{display:table-header-group}
  .mi .table tr,.mi-end{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){.mi .btn-light{transition:none}.mi .btn-light:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#575a73] uppercase print:hidden">Brand colour band with a totals card</span>
<article class="mx-auto max-w-[820px] overflow-hidden rounded-[20px] bg-white text-[14px] leading-[1.55] text-mi-ink shadow-[0_1px_2px_rgba(25,26,44,.06),0_30px_60px_-36px_rgba(67,56,202,.45)] [print-color-adjust:exact] max-[480px]:text-[13px] print:max-w-none print:rounded-none print:text-[10pt] print:shadow-none" aria-labelledby="mi1-title">
  <header class="flex flex-wrap items-end justify-between gap-5 bg-linear-[115deg] from-mi-brand to-mi-brand-2 px-11 py-[34px] text-white max-[720px]:px-[22px]">
    <p class="flex items-center gap-2.5 text-[1.1rem] font-bold tracking-[-.01em]"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 18l4-5 3 3 5-7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>Lumen Analytics</p>
    <div><h2 class="text-[.78rem] font-semibold tracking-[.16em] uppercase opacity-[.92]" id="mi1-title">Invoice</h2><p class="text-[1.9rem] leading-[1.15] font-bold tracking-[-.02em] tabular-nums">LA-10388</p></div>
  </header>
  <div class="px-11 pt-9 pb-10 max-[720px]:px-[22px]">
    <div class="grid grid-cols-3 gap-6 pb-[30px] max-[720px]:grid-cols-2 max-[480px]:grid-cols-1">
      <div><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] text-mi-muted uppercase">From</h3><address class="text-mi-muted not-italic"><strong class="block text-mi-ink">Lumen Analytics Inc.</strong>500 Alder Street, Floor 3<br>Seattle, WA 98104<br>[email protected]</address></div>
      <div><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] text-mi-muted uppercase">Bill to</h3><address class="text-mi-muted not-italic"><strong class="block text-mi-ink">Orchard Lane Bakery</strong>Priya Natarajan<br>12 Orchard Lane<br>Tacoma, WA 98402</address></div>
      <div><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] text-mi-muted uppercase">Dates</h3><dl class="grid gap-0.5 tabular-nums [&_dd]:font-semibold [&_dt]:text-mi-muted [&>div]:flex [&>div]:justify-between [&>div]:gap-3"><div><dt>Issued</dt><dd>1 Oct 2026</dd></div><div><dt>Due</dt><dd>31 Oct 2026</dd></div><div><dt>Customer ID</dt><dd>C-2291</dd></div></dl></div>
    </div>
    <table class="w-full border-collapse tabular-nums [&_.num]:text-right [&_.num]:whitespace-nowrap">
      <caption class="pb-2.5 text-left text-base font-bold">Subscription and services</caption>
      <thead class="[&_th]:bg-mi-soft [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-[.74rem] [&_th]:font-semibold [&_th]:tracking-[.08em] [&_th]:text-mi-muted [&_th]:uppercase [&_th:first-child]:rounded-l-[10px] [&_th:last-child]:rounded-r-[10px] max-[480px]:[&_th]:px-1.5"><tr><th scope="col" class="text-left">Item</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Price</th><th scope="col" class="num">Amount</th></tr></thead>
      <tbody class="[&_:is(th,td)]:border-b [&_:is(th,td)]:border-mi-line [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-4 [&_:is(th,td)]:align-top [&_th]:text-left [&_th]:font-semibold [&_th_span]:block [&_th_span]:text-[.86rem] [&_th_span]:font-normal [&_th_span]:text-mi-muted max-[480px]:[&_:is(th,td)]:px-1.5">
        <tr><th scope="row">Growth plan, annual<span>1 Oct 2026 – 30 Sep 2027</span></th><td class="num">1</td><td class="num">$2,388.00</td><td class="num">$2,388.00</td></tr>
        <tr><th scope="row">Additional seats<span>4 × $108.00 per year</span></th><td class="num">4</td><td class="num">$108.00</td><td class="num">$432.00</td></tr>
        <tr><th scope="row">Data warehouse connector<span>Annual add-on</span></th><td class="num">1</td><td class="num">$360.00</td><td class="num">$360.00</td></tr>
        <tr><th scope="row">Onboarding workshop<span>2 hours, remote</span></th><td class="num">2</td><td class="num">$150.00</td><td class="num">$300.00</td></tr>
      </tbody>
    </table>
    <div class="mt-7 grid grid-cols-[minmax(0,1fr)_300px] items-start gap-7 max-[720px]:grid-cols-1 print:break-inside-avoid">
      <div class="text-mi-muted"><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] uppercase">Payment</h3>
        <p>Pay by card or ACH from the billing portal, or by wire to account •••• 6610, reference LA-10388.</p>
        <p class="mt-2">Questions about this invoice? Email <a class="font-semibold text-mi-brand underline focus-visible:rounded focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-mi-brand" href="mailto:[email protected]">[email protected]</a>.</p></div>
      <dl class="rounded-2xl bg-mi-tint px-[22px] py-5 tabular-nums [&_dd]:font-semibold [&_dt]:text-mi-muted [&>div]:flex [&>div]:justify-between [&>div]:gap-3 [&>div]:py-1">
        <div><dt>Subtotal</dt><dd>$3,480.00</dd></div>
        <div><dt>Tax (8.25%)</dt><dd>$287.10</dd></div>
        <div><dt>Paid</dt><dd>$0.00</dd></div>
        <div class="mt-2.5 border-t border-[#cfd2f5] pt-3.5!"><dt class="self-center font-bold text-mi-ink!">Amount due</dt><dd class="text-[1.6rem] font-extrabold! tracking-[-.02em] text-mi-brand">$3,767.10</dd></div>
      </dl>
    </div>
  </div>
</article>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#575a73] uppercase print:hidden">Side band with amount due and a pay link</span>
<article class="mx-auto grid max-w-[820px] grid-cols-[250px_minmax(0,1fr)] overflow-hidden rounded-[20px] bg-white text-[14px] leading-[1.55] text-mi-ink shadow-[0_1px_2px_rgba(25,26,44,.06),0_30px_60px_-36px_rgba(67,56,202,.45)] [print-color-adjust:exact] max-[720px]:grid-cols-1 max-[480px]:text-[13px] print:max-w-none print:break-before-page print:rounded-none print:text-[10pt] print:shadow-none" aria-labelledby="mi2-title">
  <header class="flex flex-col items-start justify-between gap-7 bg-linear-[170deg] from-mi-brand-2 to-mi-brand px-7 py-[34px] text-white max-[720px]:px-[22px] max-[720px]:py-7">
    <div><p class="flex items-center gap-2.5 text-[1.1rem] font-bold tracking-[-.01em]"><svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><rect x="2" y="7" width="24" height="17" rx="4" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="14" cy="15.5" r="4.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 7l2-3h4l2 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Northline Photo</p>
      <h2 class="mt-[22px] text-[.78rem] font-semibold tracking-[.16em] uppercase opacity-[.92]" id="mi2-title">Invoice</h2><p class="text-[1.35rem] leading-[1.15] font-bold tracking-[-.02em] tabular-nums">NP-2219</p></div>
    <div class="grid gap-0.5"><p class="opacity-[.92]">Amount due</p><p class="text-[2.1rem] leading-[1.15] font-bold tracking-[-.02em] tabular-nums">$3,290.00</p><p class="opacity-[.92]">by 30 Nov 2026</p></div>
    <a class="inline-flex items-center gap-2 rounded-full bg-white px-[18px] py-[11px] font-bold text-mi-brand transition-transform duration-150 hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-white motion-reduce:transition-none motion-reduce:hover:translate-y-0 print:hidden" href="https://pay.northline.example/NP-2219">Pay online<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </header>
  <div class="px-11 pt-9 pb-10 max-[720px]:px-[22px]">
    <div class="grid grid-cols-2 gap-6 pb-[30px] max-[480px]:grid-cols-1">
      <div><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] text-mi-muted uppercase">Bill to</h3><address class="text-mi-muted not-italic"><strong class="block text-mi-ink">Juniper & Sage Events</strong>Laila Haddad<br>304 Cedar Row<br>Spokane, WA 99201</address></div>
      <div><h3 class="mb-1.5 text-[.74rem] font-semibold tracking-[.08em] text-mi-muted uppercase">Event</h3><dl class="grid gap-0.5 tabular-nums [&_dd]:font-semibold [&_dt]:text-mi-muted [&>div]:flex [&>div]:justify-between [&>div]:gap-3"><div><dt>Date</dt><dd>24 Oct 2026</dd></div><div><dt>Venue</dt><dd>Hollow Pine Farm</dd></div><div><dt>Issued</dt><dd>31 Oct 2026</dd></div></dl></div>
    </div>
    <table class="w-full border-collapse tabular-nums [&_.num]:text-right [&_.num]:whitespace-nowrap">
      <caption class="pb-2.5 text-left text-base font-bold">Wedding photography</caption>
      <thead class="[&_th]:bg-mi-soft [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-[.74rem] [&_th]:font-semibold [&_th]:tracking-[.08em] [&_th]:text-mi-muted [&_th]:uppercase [&_th:first-child]:rounded-l-[10px] [&_th:last-child]:rounded-r-[10px] max-[480px]:[&_th]:px-1.5"><tr><th scope="col" class="text-left">Item</th><th scope="col" class="num">Qty</th><th scope="col" class="num">Price</th><th scope="col" class="num">Amount</th></tr></thead>
      <tbody class="[&_:is(th,td)]:border-b [&_:is(th,td)]:border-mi-line [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-4 [&_:is(th,td)]:align-top [&_th]:text-left [&_th]:font-semibold [&_th_span]:block [&_th_span]:text-[.86rem] [&_th_span]:font-normal [&_th_span]:text-mi-muted max-[480px]:[&_:is(th,td)]:px-1.5">
        <tr><th scope="row">Full-day coverage<span>8 hours, two locations</span></th><td class="num">1</td><td class="num">$3,200.00</td><td class="num">$3,200.00</td></tr>
        <tr><th scope="row">Second shooter<span>Hourly</span></th><td class="num">6</td><td class="num">$75.00</td><td class="num">$450.00</td></tr>
        <tr><th scope="row">Fine-art album<span>30 × 30 cm, 40 pages</span></th><td class="num">1</td><td class="num">$640.00</td><td class="num">$640.00</td></tr>
      </tbody>
    </table>
    <div class="mt-7 flex justify-end print:break-inside-avoid">
      <dl class="w-full max-w-[340px] rounded-2xl bg-mi-tint px-[22px] py-5 tabular-nums [&_dd]:font-semibold [&_dt]:text-mi-muted [&>div]:flex [&>div]:justify-between [&>div]:gap-3 [&>div]:py-1">
        <div><dt>Subtotal</dt><dd>$4,290.00</dd></div>
        <div><dt>Deposit paid 2 Mar</dt><dd class="text-[#166534]">−$1,000.00</dd></div>
        <div class="mt-2.5 border-t border-[#cfd2f5] pt-3.5!"><dt class="self-center font-bold text-mi-ink!">Amount due</dt><dd class="text-[1.6rem] font-extrabold! tracking-[-.02em] text-mi-brand">$3,290.00</dd></div>
      </dl>
    </div>
  </div>
</article>
</div>
CSS 
@theme {
  --color-mi-brand: #4338ca;
  --color-mi-brand-2: #6d28d9;
  --color-mi-ink: #191a2c;
  --color-mi-muted: #575a73;
  --color-mi-line: #e3e5ef;
  --color-mi-soft: #f5f5fc;
  --color-mi-tint: #eef0ff;
}
/* the band and the totals tint print too (print-color-adjust in the markup); the header row repeats on each page */
@page { size: auto; margin: 12mm; }
@media print { thead { display: table-header-group; } tr { break-inside: avoid; } }

About this set

Two invoices in a clean modern style with a brand colour band and a tinted totals card. Brand colour band is a SaaS subscription invoice: a gradient header with the logo and invoice number, three columns for From, Bill to and dates, a line items table with a soft rounded header row, payment instructions, and a totals card that ends in a large amount due. Side band with amount due is a photographer’s invoice where the band becomes a side column holding the invoice number, the amount still to pay, the due date and a Pay online link, beside the client details, the items and a totals card that subtracts the deposit already paid. Use the first for software, agencies and retainers, and the second when the reader’s first question is how much is left to pay. The band and the card tint use print-color-adjust:exact so they survive Print and Save as PDF, the Pay online link is hidden in print, and each invoice prints on its own page. Below 720 pixels the side band moves to the top and the columns stack. Nothing needs JavaScript.

What’s included

  • Gradient brand band across the top or down the side
  • Totals card with subtotal, tax, payments and amount due
  • Pay online link in the side band, hidden when printed
  • print-color-adjust:exact keeps the band colour in PDFs
  • No JavaScript

Accessibility

Each invoice is an article named by its heading, the items are a table with a caption and scoped column and row headers, and the totals are a description list. White text on the indigo band is above 7:1, links have a visible focus outline, and the Pay online hover lift is switched off under prefers-reduced-motion.

Customise it

Change --mi-brand and --mi-brand-2 for the band gradient and --mi-tint for the totals card on .mi. In Bootstrap the same variables sit on .mi beside the --bs-card and --bs-table overrides; in Tailwind edit the mi-* colours in @theme.