Open demo

CSS code

HTML 
<div><span class="lbl">Container-query invoice in a wide slot</span>
<article class="mc" aria-labelledby="mc1-title">
  <div class="mc-paper">
    <header class="mc-top">
      <div class="mc-brand"><svg class="mc-mark" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="mc-co">Kestrel & Finch Bindery</p><p class="mc-small">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="mc-id"><h2 class="mc-title" id="mc1-title">Invoice <span class="mc-no">KF-0731</span></h2>
        <span class="mc-status"><span class="mc-unpaid">Awaiting payment</span><span class="mc-paidtxt">Paid</span></span></div>
    </header>
    <dl class="mc-meta">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="mc-bal"><span class="mc-unpaid">$1,682.12</span><span class="mc-paidtxt">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mc-table" aria-labelledby="mc1-cap">
      <caption class="mc-cap" id="mc1-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class=""><tr role="row" class=""><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="mc-r">Qty</th><th role="columnheader" scope="col" class="mc-r">Price</th><th role="columnheader" scope="col" class="mc-r">Amount</th></tr></thead>
      <tbody role="rowgroup" class=""><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Leather rebinding<span class="mc-note">19th-century ledgers, half calf</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$180.00</td><td role="cell" class="mc-amt">$1,080.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Custom box enclosures<span class="mc-note">Acid-free board, cloth covered</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$42.50</td><td role="cell" class="mc-amt">$255.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Spine label tooling<span class="mc-note">Gold leaf, two lines</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$15.00</td><td role="cell" class="mc-amt">$90.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Condition report<span class="mc-note">Photographed, per collection</span></th><td role="cell" class="mc-qty" data-label="Qty">1</td><td role="cell" class="mc-price" data-label="Price">$120.00</td><td role="cell" class="mc-amt">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="">
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class=" mc-grand"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="mc-foot">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="mc-stamp" aria-hidden="true">Paid</div>
  </div>
  <label class="mc-toggle"><input class="mc-check" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
<div><span class="lbl">The same invoice in a 340px side panel</span>
<div class="demo-slot">
<article class="mc" aria-labelledby="mc2-title">
  <div class="mc-paper">
    <header class="mc-top">
      <div class="mc-brand"><svg class="mc-mark" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="mc-co">Kestrel & Finch Bindery</p><p class="mc-small">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="mc-id"><h2 class="mc-title" id="mc2-title">Invoice <span class="mc-no">KF-0731</span></h2>
        <span class="mc-status"><span class="mc-unpaid">Awaiting payment</span><span class="mc-paidtxt">Paid</span></span></div>
    </header>
    <dl class="mc-meta">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="mc-bal"><span class="mc-unpaid">$1,682.12</span><span class="mc-paidtxt">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mc-table" aria-labelledby="mc2-cap">
      <caption class="mc-cap" id="mc2-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class=""><tr role="row" class=""><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="mc-r">Qty</th><th role="columnheader" scope="col" class="mc-r">Price</th><th role="columnheader" scope="col" class="mc-r">Amount</th></tr></thead>
      <tbody role="rowgroup" class=""><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Leather rebinding<span class="mc-note">19th-century ledgers, half calf</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$180.00</td><td role="cell" class="mc-amt">$1,080.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Custom box enclosures<span class="mc-note">Acid-free board, cloth covered</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$42.50</td><td role="cell" class="mc-amt">$255.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Spine label tooling<span class="mc-note">Gold leaf, two lines</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$15.00</td><td role="cell" class="mc-amt">$90.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Condition report<span class="mc-note">Photographed, per collection</span></th><td role="cell" class="mc-qty" data-label="Qty">1</td><td role="cell" class="mc-price" data-label="Price">$120.00</td><td role="cell" class="mc-amt">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="">
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class=" mc-grand"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="mc-foot">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="mc-stamp" aria-hidden="true">Paid</div>
  </div>
  <label class="mc-toggle"><input class="mc-check" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
</div>
CSS 
/* Modern-CSS invoice, no JavaScript.
   - container-type:inline-size: the invoice lays itself out by the width of its own slot, not the viewport.
   - subgrid: thead, tbody, tfoot and every row share the table's four column tracks, so long descriptions and
     amounts stay aligned across row groups. Changing a table's display can drop its semantics in some browsers,
     so the elements carry explicit ARIA table roles.
   - :has(): the "Show as paid" switch adds the stamp and swaps the status and balance, all in CSS.
   - tabular-nums for aligned figures; print-color-adjust:exact keeps the header tint in print and PDF. */
.mc{--mc-accent:#be123c;--mc-ink:#231a1e;--mc-muted:#5f5257;--mc-line:#eadde1;--mc-paper:#fff;--mc-tint:color-mix(in oklab,var(--mc-accent) 7%,#fff);
  box-sizing:border-box;container-type:inline-size;container-name:invoice;color:var(--mc-ink);font-size:14px;line-height:1.5}
.mc *,.mc *::before,.mc *::after{box-sizing:border-box}
:where(.mc) :is(h2,p,dl,dd,table){margin:0}
.mc-paper{position:relative;overflow:hidden;background:var(--mc-paper);border-radius:18px;box-shadow:0 1px 2px rgba(35,26,30,.06),0 24px 48px -30px rgba(35,26,30,.4);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.mc-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:26px 32px;background:var(--mc-tint);border-bottom:1px solid var(--mc-line)}
.mc-brand{display:flex;align-items:center;gap:12px}
.mc-mark{flex:none;color:var(--mc-accent)}
.mc-co{font-weight:700;font-size:1.05rem;text-wrap:balance}
.mc-small{font-size:.82rem;color:var(--mc-muted)}
.mc-id{display:grid;justify-items:end;gap:6px}
.mc-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mc-no{color:var(--mc-accent);font-variant-numeric:tabular-nums}
.mc-status{display:inline-flex;padding:3px 10px;border-radius:999px;border:1px solid #e3a5b4;background:#fff;color:#9f1239;font-size:.76rem;font-weight:700}
.mc-paidtxt{display:none}
.mc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 24px;padding:24px 32px}
.mc-meta dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted);margin-bottom:2px}
.mc-meta dd{font-variant-numeric:tabular-nums}
.mc-bal{font-size:1.25rem;font-weight:800;color:var(--mc-accent)}
/* the table: one grid, rows on subgrid */
.mc-table{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:20px;margin:0 32px;font-variant-numeric:tabular-nums}
.mc-cap{display:block;grid-column:1/-1;text-align:left;font-weight:700;padding-bottom:8px}
.mc-table :is(thead,tbody,tfoot),.mc-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.mc-table tr{align-items:baseline;border-bottom:1px solid var(--mc-line)}
.mc-table thead th{padding:8px 0;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted);text-align:left}
.mc-table thead tr{border-bottom:2px solid var(--mc-ink)}
.mc-table tbody :is(th,td){padding:13px 0}
.mc-desc{font-weight:600;text-align:left}
.mc-note{display:block;font-weight:400;font-size:.84rem;color:var(--mc-muted)}
.mc-table .mc-r,.mc-qty,.mc-price,.mc-amt{text-align:right;white-space:nowrap}
.mc-amt{font-weight:600}
.mc-table tfoot tr{border-bottom:0}
.mc-table tfoot th{grid-column:1/4;padding:4px 0;text-align:right;font-weight:400;color:var(--mc-muted)}
.mc-table tfoot td{grid-column:4;padding:4px 0;text-align:right}
.mc-table tfoot tr:first-child>*{padding-top:14px}
.mc-grand>*{padding-top:10px!important;font-size:1.15rem;font-weight:800!important;color:var(--mc-ink)!important}
.mc-foot{padding:22px 32px 28px;color:var(--mc-muted);font-size:.86rem;text-wrap:pretty}
.mc-stamp{position:absolute;bottom:70px;left:32px;padding:6px 18px;border:3px solid #15803d;border-radius:8px;color:#15803d;font-weight:900;font-size:1.6rem;letter-spacing:.2em;text-transform:uppercase;
  rotate:-12deg;opacity:0;scale:1.4;transition:opacity .25s,scale .25s;pointer-events:none}
.mc-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:.86rem;font-weight:600;cursor:pointer}
.mc-check{appearance:none;position:relative;width:40px;height:22px;margin:0;border-radius:999px;background:#8a7d82;cursor:pointer;transition:background-color .2s}
.mc-check::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:translate .2s}
.mc-check:checked{background:#15803d}
.mc-check:checked::after{translate:18px 0}
.mc-check:focus-visible{outline:2px solid var(--mc-accent);outline-offset:3px}
.mc:has(.mc-check:checked) .mc-stamp{opacity:.9;scale:1}
.mc:has(.mc-check:checked) .mc-unpaid{display:none}
.mc:has(.mc-check:checked) .mc-paidtxt{display:inline}
.mc:has(.mc-check:checked) .mc-status{border-color:#86c79c;color:#15803d}
.mc:has(.mc-check:checked) .mc-bal{color:#15803d}
/* narrow slot: header stacks, rows become two-line cards, column headers stay for screen readers only */
@container invoice (max-width:520px){
  .mc-top,.mc-meta,.mc-foot{padding-left:18px;padding-right:18px}
  .mc-id{justify-items:start}
  .mc-meta{grid-template-columns:1fr 1fr}
  .mc-meta div:first-child{grid-column:1/-1}
  .mc-table{display:block;margin:0 18px}
  .mc-table :is(tbody,tfoot){display:block}
  .mc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .mc-table tbody tr{grid-template-columns:auto auto minmax(0,1fr);column-gap:6px;padding:10px 0}
  .mc-table tbody :is(th,td){padding:0}
  .mc-desc{grid-column:1/-1}
  .mc-qty,.mc-price{color:var(--mc-muted);font-size:.86rem}
  .mc-qty::after{content:" ×"}
  .mc-amt{grid-column:3}
  .mc-table tfoot tr{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .mc-table tfoot th{grid-column:1}
  .mc-table tfoot td{grid-column:2}
  .mc-stamp{top:96px;bottom:auto;left:auto;right:16px;font-size:1.2rem}
}
@page{size:auto;margin:12mm}
@media print{.mc-paper{box-shadow:none;border-radius:0}.mc-toggle{display:none}.mc{font-size:10pt}.mc-table tr{break-inside:avoid}}
@media (prefers-reduced-motion:reduce){.mc-stamp,.mc-check,.mc-check::after{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Container-query invoice in a wide slot</span>
<article class="mc" aria-labelledby="mc1-title">
  <div class="mc-paper card">
    <header class="mc-top">
      <div class="mc-brand"><svg class="mc-mark" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="mc-co">Kestrel & Finch Bindery</p><p class="mc-small mb-0 small">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="mc-id"><h2 class="mc-title" id="mc1-title">Invoice <span class="mc-no">KF-0731</span></h2>
        <span class="badge rounded-pill mc-status"><span class="mc-unpaid">Awaiting payment</span><span class="mc-paidtxt">Paid</span></span></div>
    </header>
    <dl class="mc-meta">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="mc-bal"><span class="mc-unpaid">$1,682.12</span><span class="mc-paidtxt">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mc-table" aria-labelledby="mc1-cap">
      <caption class="mc-cap" id="mc1-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class=""><tr role="row" class=""><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="mc-r">Qty</th><th role="columnheader" scope="col" class="mc-r">Price</th><th role="columnheader" scope="col" class="mc-r">Amount</th></tr></thead>
      <tbody role="rowgroup" class=""><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Leather rebinding<span class="mc-note">19th-century ledgers, half calf</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$180.00</td><td role="cell" class="mc-amt">$1,080.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Custom box enclosures<span class="mc-note">Acid-free board, cloth covered</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$42.50</td><td role="cell" class="mc-amt">$255.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Spine label tooling<span class="mc-note">Gold leaf, two lines</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$15.00</td><td role="cell" class="mc-amt">$90.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Condition report<span class="mc-note">Photographed, per collection</span></th><td role="cell" class="mc-qty" data-label="Qty">1</td><td role="cell" class="mc-price" data-label="Price">$120.00</td><td role="cell" class="mc-amt">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="">
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class=" mc-grand"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="mc-foot">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="mc-stamp" aria-hidden="true">Paid</div>
  </div>
  <label class="form-check form-switch mc-toggle"><input class="form-check-input mc-check" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
<div><span class="lbl">The same invoice in a 340px side panel</span>
<div class="demo-slot">
<article class="mc" aria-labelledby="mc2-title">
  <div class="mc-paper card">
    <header class="mc-top">
      <div class="mc-brand"><svg class="mc-mark" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="mc-co">Kestrel & Finch Bindery</p><p class="mc-small mb-0 small">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="mc-id"><h2 class="mc-title" id="mc2-title">Invoice <span class="mc-no">KF-0731</span></h2>
        <span class="badge rounded-pill mc-status"><span class="mc-unpaid">Awaiting payment</span><span class="mc-paidtxt">Paid</span></span></div>
    </header>
    <dl class="mc-meta">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="mc-bal"><span class="mc-unpaid">$1,682.12</span><span class="mc-paidtxt">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mc-table" aria-labelledby="mc2-cap">
      <caption class="mc-cap" id="mc2-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class=""><tr role="row" class=""><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="mc-r">Qty</th><th role="columnheader" scope="col" class="mc-r">Price</th><th role="columnheader" scope="col" class="mc-r">Amount</th></tr></thead>
      <tbody role="rowgroup" class=""><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Leather rebinding<span class="mc-note">19th-century ledgers, half calf</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$180.00</td><td role="cell" class="mc-amt">$1,080.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Custom box enclosures<span class="mc-note">Acid-free board, cloth covered</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$42.50</td><td role="cell" class="mc-amt">$255.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Spine label tooling<span class="mc-note">Gold leaf, two lines</span></th><td role="cell" class="mc-qty" data-label="Qty">6</td><td role="cell" class="mc-price" data-label="Price">$15.00</td><td role="cell" class="mc-amt">$90.00</td></tr><tr role="row" class=""><th role="rowheader" scope="row" class="mc-desc">Condition report<span class="mc-note">Photographed, per collection</span></th><td role="cell" class="mc-qty" data-label="Qty">1</td><td role="cell" class="mc-price" data-label="Price">$120.00</td><td role="cell" class="mc-amt">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="">
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class=""><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class=" mc-grand"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="mc-foot">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="mc-stamp" aria-hidden="true">Paid</div>
  </div>
  <label class="form-check form-switch mc-toggle"><input class="form-check-input mc-check" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
</div>
CSS 
/* Bootstrap .card, .badge and .form-check.form-switch, plus container queries and subgrid that Bootstrap does not provide.
   Modern-CSS invoice, no JavaScript.
   - container-type:inline-size: the invoice lays itself out by the width of its own slot, not the viewport.
   - subgrid: thead, tbody, tfoot and every row share the table's four column tracks, so long descriptions and
     amounts stay aligned across row groups. Changing a table's display can drop its semantics in some browsers,
     so the elements carry explicit ARIA table roles.
   - :has(): the "Show as paid" switch adds the stamp and swaps the status and balance, all in CSS.
   - tabular-nums for aligned figures; print-color-adjust:exact keeps the header tint in print and PDF. */
.mc{--mc-accent:#be123c;--mc-ink:#231a1e;--mc-muted:#5f5257;--mc-line:#eadde1;--mc-paper:#fff;--mc-tint:color-mix(in oklab,var(--mc-accent) 7%,#fff);
  box-sizing:border-box;container-type:inline-size;container-name:invoice;color:var(--mc-ink);font-size:14px;line-height:1.5}
.mc *,.mc *::before,.mc *::after{box-sizing:border-box}
:where(.mc) :is(h2,p,dl,dd,table){margin:0}
.mc-paper{position:relative;overflow:hidden;background:var(--mc-paper);border-radius:18px;box-shadow:0 1px 2px rgba(35,26,30,.06),0 24px 48px -30px rgba(35,26,30,.4);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.mc-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:26px 32px;background:var(--mc-tint);border-bottom:1px solid var(--mc-line)}
.mc-brand{display:flex;align-items:center;gap:12px}
.mc-mark{flex:none;color:var(--mc-accent)}
.mc-co{font-weight:700;font-size:1.05rem;text-wrap:balance}
.mc-small{font-size:.82rem;color:var(--mc-muted)}
.mc-id{display:grid;justify-items:end;gap:6px}
.mc-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.mc-no{color:var(--mc-accent);font-variant-numeric:tabular-nums}
.mc-status{display:inline-flex;padding:3px 10px;border-radius:999px;border:1px solid #e3a5b4;background:#fff;color:#9f1239;font-size:.76rem;font-weight:700}
.mc-paidtxt{display:none}
.mc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 24px;padding:24px 32px}
.mc-meta dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted);margin-bottom:2px}
.mc-meta dd{font-variant-numeric:tabular-nums}
.mc-bal{font-size:1.25rem;font-weight:800;color:var(--mc-accent)}
/* the table: one grid, rows on subgrid */
.mc-table{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:20px;margin:0 32px;font-variant-numeric:tabular-nums}
.mc-cap{display:block;grid-column:1/-1;text-align:left;font-weight:700;padding-bottom:8px}
.mc-table :is(thead,tbody,tfoot),.mc-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.mc-table tr{align-items:baseline;border-bottom:1px solid var(--mc-line)}
.mc-table thead th{padding:8px 0;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-muted);text-align:left}
.mc-table thead tr{border-bottom:2px solid var(--mc-ink)}
.mc-table tbody :is(th,td){padding:13px 0}
.mc-desc{font-weight:600;text-align:left}
.mc-note{display:block;font-weight:400;font-size:.84rem;color:var(--mc-muted)}
.mc-table .mc-r,.mc-qty,.mc-price,.mc-amt{text-align:right;white-space:nowrap}
.mc-amt{font-weight:600}
.mc-table tfoot tr{border-bottom:0}
.mc-table tfoot th{grid-column:1/4;padding:4px 0;text-align:right;font-weight:400;color:var(--mc-muted)}
.mc-table tfoot td{grid-column:4;padding:4px 0;text-align:right}
.mc-table tfoot tr:first-child>*{padding-top:14px}
.mc-grand>*{padding-top:10px!important;font-size:1.15rem;font-weight:800!important;color:var(--mc-ink)!important}
.mc-foot{padding:22px 32px 28px;color:var(--mc-muted);font-size:.86rem;text-wrap:pretty}
.mc-stamp{position:absolute;bottom:70px;left:32px;padding:6px 18px;border:3px solid #15803d;border-radius:8px;color:#15803d;font-weight:900;font-size:1.6rem;letter-spacing:.2em;text-transform:uppercase;
  rotate:-12deg;opacity:0;scale:1.4;transition:opacity .25s,scale .25s;pointer-events:none}
.mc-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:.86rem;font-weight:600;cursor:pointer}
.mc-toggle{padding-left:0;min-height:0}
.mc .form-switch .mc-check{float:none;width:40px;height:22px;margin:0;border-color:#8a7d82;background-color:#8a7d82;cursor:pointer;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}
.mc .form-switch .mc-check:checked{background-color:#15803d;border-color:#15803d}
.mc .form-switch .mc-check:focus{box-shadow:none;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}
.mc .card{--bs-card-border-width:0;--bs-card-border-radius:18px}
.mc .badge{--bs-badge-font-size:.76rem;--bs-badge-font-weight:700;--bs-badge-padding-x:10px;--bs-badge-padding-y:4px}
.mc-check:focus-visible{outline:2px solid var(--mc-accent);outline-offset:3px}
.mc:has(.mc-check:checked) .mc-stamp{opacity:.9;scale:1}
.mc:has(.mc-check:checked) .mc-unpaid{display:none}
.mc:has(.mc-check:checked) .mc-paidtxt{display:inline}
.mc:has(.mc-check:checked) .mc-status{border-color:#86c79c;color:#15803d}
.mc:has(.mc-check:checked) .mc-bal{color:#15803d}
/* narrow slot: header stacks, rows become two-line cards, column headers stay for screen readers only */
@container invoice (max-width:520px){
  .mc-top,.mc-meta,.mc-foot{padding-left:18px;padding-right:18px}
  .mc-id{justify-items:start}
  .mc-meta{grid-template-columns:1fr 1fr}
  .mc-meta div:first-child{grid-column:1/-1}
  .mc-table{display:block;margin:0 18px}
  .mc-table :is(tbody,tfoot){display:block}
  .mc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .mc-table tbody tr{grid-template-columns:auto auto minmax(0,1fr);column-gap:6px;padding:10px 0}
  .mc-table tbody :is(th,td){padding:0}
  .mc-desc{grid-column:1/-1}
  .mc-qty,.mc-price{color:var(--mc-muted);font-size:.86rem}
  .mc-qty::after{content:" ×"}
  .mc-amt{grid-column:3}
  .mc-table tfoot tr{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .mc-table tfoot th{grid-column:1}
  .mc-table tfoot td{grid-column:2}
  .mc-stamp{top:96px;bottom:auto;left:auto;right:16px;font-size:1.2rem}
}
@page{size:auto;margin:12mm}
@media print{.mc-paper{box-shadow:none;border-radius:0}.mc-toggle{display:none}.mc{font-size:10pt}.mc-table tr{break-inside:avoid}}
@media (prefers-reduced-motion:reduce){.mc-stamp,.mc-check{transition:none}}
.mc :is(h2,p,dl,dd){margin-bottom:0}
.mc .mc-cap{color:var(--mc-ink)}
.mc-meta dt{font-weight:700}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5f5257] uppercase print:hidden">Container-query invoice in a wide slot</span>
<article class="group/mc @container/invoice text-[14px] leading-normal text-mc-ink print:text-[10pt]" aria-labelledby="mc1-title">
  <div class="relative overflow-hidden rounded-[18px] bg-white shadow-[0_1px_2px_rgba(35,26,30,.06),0_24px_48px_-30px_rgba(35,26,30,.4)] [print-color-adjust:exact] print:rounded-none print:shadow-none">
    <header class="flex flex-wrap items-center justify-between gap-4 border-b border-mc-line bg-[color-mix(in_oklab,var(--color-mc-accent)_7%,#fff)] px-8 py-[26px] @max-[520px]/invoice:px-[18px]">
      <div class="flex items-center gap-3"><svg class="flex-none text-mc-accent" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="text-[1.05rem] font-bold text-balance">Kestrel & Finch Bindery</p><p class="text-[.82rem] text-mc-muted">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="grid justify-items-end gap-1.5 @max-[520px]/invoice:justify-items-start"><h2 class="text-[1.5rem] leading-[1.1] font-extrabold tracking-[-.02em]" id="mc1-title">Invoice <span class="text-mc-accent tabular-nums">KF-0731</span></h2>
        <span class="inline-flex rounded-full border border-[#e3a5b4] bg-white px-2.5 py-[3px] text-[.76rem] font-bold text-[#9f1239] group-has-[input:checked]/mc:border-[#86c79c] group-has-[input:checked]/mc:text-[#15803d]"><span class="group-has-[input:checked]/mc:hidden">Awaiting payment</span><span class="hidden group-has-[input:checked]/mc:inline">Paid</span></span></div>
    </header>
    <dl class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-x-6 gap-y-4 px-8 py-6 tabular-nums @max-[520px]/invoice:grid-cols-2 @max-[520px]/invoice:px-[18px] [&_dt]:mb-0.5 [&_dt]:text-[.72rem] [&_dt]:font-bold [&_dt]:tracking-[.1em] [&_dt]:text-mc-muted [&_dt]:uppercase @max-[520px]/invoice:[&>div:first-child]:col-span-full">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="text-[1.25rem] font-extrabold text-mc-accent group-has-[input:checked]/mc:text-[#15803d]"><span class="group-has-[input:checked]/mc:hidden">$1,682.12</span><span class="hidden group-has-[input:checked]/mc:inline">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mx-8 grid grid-cols-[minmax(0,1fr)_auto_auto_auto] gap-x-5 tabular-nums @max-[520px]/invoice:mx-[18px] @max-[520px]/invoice:block" aria-labelledby="mc1-cap">
      <caption class="col-span-full block pb-2 text-left font-bold" id="mc1-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:sr-only"><tr role="row" class="col-span-full grid grid-cols-subgrid border-b-2 border-mc-ink [&>th]:py-2 [&>th]:text-left [&>th]:text-[.72rem] [&>th]:font-bold [&>th]:tracking-[.1em] [&>th]:text-mc-muted [&>th]:uppercase"><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="text-right!">Qty</th><th role="columnheader" scope="col" class="text-right!">Price</th><th role="columnheader" scope="col" class="text-right!">Amount</th></tr></thead>
      <tbody role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:block"><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Leather rebinding<span class="block text-[.84rem] font-normal text-mc-muted">19th-century ledgers, half calf</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$180.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$1,080.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Custom box enclosures<span class="block text-[.84rem] font-normal text-mc-muted">Acid-free board, cloth covered</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$42.50</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$255.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Spine label tooling<span class="block text-[.84rem] font-normal text-mc-muted">Gold leaf, two lines</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$15.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$90.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Condition report<span class="block text-[.84rem] font-normal text-mc-muted">Photographed, per collection</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">1</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$120.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:block [&>tr:first-child>*]:pt-3.5">
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2"><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2"><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2 [&>*]:pt-2.5! [&>*]:text-[1.15rem] [&>*]:font-extrabold! [&>*]:text-mc-ink!"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="px-8 pt-[22px] pb-7 text-[.86rem] text-pretty text-mc-muted @max-[520px]/invoice:px-[18px]">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="pointer-events-none absolute bottom-[70px] left-8 scale-140 -rotate-12 rounded-lg border-[3px] border-[#15803d] px-[18px] py-1.5 text-[1.6rem] font-black tracking-[.2em] text-[#15803d] uppercase opacity-0 transition-[opacity,scale] duration-250 motion-reduce:transition-none group-has-[input:checked]/mc:scale-100 group-has-[input:checked]/mc:opacity-90 @max-[520px]/invoice:top-24 @max-[520px]/invoice:bottom-auto @max-[520px]/invoice:left-auto @max-[520px]/invoice:right-4 @max-[520px]/invoice:text-[1.2rem]" aria-hidden="true">Paid</div>
  </div>
  <label class="mt-3.5 inline-flex cursor-pointer items-center gap-2.5 text-[.86rem] font-semibold print:hidden"><input class="relative m-0 h-[22px] w-10 cursor-pointer appearance-none rounded-full bg-[#8a7d82] transition-colors duration-200 after:absolute after:top-[3px] after:left-[3px] after:size-4 after:rounded-full after:bg-white after:transition-transform after:duration-200 checked:bg-[#15803d] checked:after:translate-x-[18px] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-mc-accent motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5f5257] uppercase print:hidden">The same invoice in a 340px side panel</span>
<div class="max-w-[340px] print:max-w-none">
<article class="group/mc @container/invoice text-[14px] leading-normal text-mc-ink print:text-[10pt]" aria-labelledby="mc2-title">
  <div class="relative overflow-hidden rounded-[18px] bg-white shadow-[0_1px_2px_rgba(35,26,30,.06),0_24px_48px_-30px_rgba(35,26,30,.4)] [print-color-adjust:exact] print:rounded-none print:shadow-none">
    <header class="flex flex-wrap items-center justify-between gap-4 border-b border-mc-line bg-[color-mix(in_oklab,var(--color-mc-accent)_7%,#fff)] px-8 py-[26px] @max-[520px]/invoice:px-[18px]">
      <div class="flex items-center gap-3"><svg class="flex-none text-mc-accent" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H6zM30 8H20a4 4 0 0 0-4 4"/><path d="M30 8v19h-11"/></svg>
        <div><p class="text-[1.05rem] font-bold text-balance">Kestrel & Finch Bindery</p><p class="text-[.82rem] text-mc-muted">12 Tanner Lane, Ithaca, NY 14850</p></div></div>
      <div class="grid justify-items-end gap-1.5 @max-[520px]/invoice:justify-items-start"><h2 class="text-[1.5rem] leading-[1.1] font-extrabold tracking-[-.02em]" id="mc2-title">Invoice <span class="text-mc-accent tabular-nums">KF-0731</span></h2>
        <span class="inline-flex rounded-full border border-[#e3a5b4] bg-white px-2.5 py-[3px] text-[.76rem] font-bold text-[#9f1239] group-has-[input:checked]/mc:border-[#86c79c] group-has-[input:checked]/mc:text-[#15803d]"><span class="group-has-[input:checked]/mc:hidden">Awaiting payment</span><span class="hidden group-has-[input:checked]/mc:inline">Paid</span></span></div>
    </header>
    <dl class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-x-6 gap-y-4 px-8 py-6 tabular-nums @max-[520px]/invoice:grid-cols-2 @max-[520px]/invoice:px-[18px] [&_dt]:mb-0.5 [&_dt]:text-[.72rem] [&_dt]:font-bold [&_dt]:tracking-[.1em] [&_dt]:text-mc-muted [&_dt]:uppercase @max-[520px]/invoice:[&>div:first-child]:col-span-full">
      <div><dt>Billed to</dt><dd>Larkspur Library Trust<br>40 Commons Road, Geneva, NY 14456</dd></div>
      <div><dt>Issued</dt><dd>14 Oct 2026</dd></div>
      <div><dt>Due</dt><dd>13 Nov 2026</dd></div>
      <div><dt>Balance due</dt><dd class="text-[1.25rem] font-extrabold text-mc-accent group-has-[input:checked]/mc:text-[#15803d]"><span class="group-has-[input:checked]/mc:hidden">$1,682.12</span><span class="hidden group-has-[input:checked]/mc:inline">$0.00</span></dd></div>
    </dl>
    <table role="table" class="mx-8 grid grid-cols-[minmax(0,1fr)_auto_auto_auto] gap-x-5 tabular-nums @max-[520px]/invoice:mx-[18px] @max-[520px]/invoice:block" aria-labelledby="mc2-cap">
      <caption class="col-span-full block pb-2 text-left font-bold" id="mc2-cap">Conservation work, order 2214</caption>
      <thead role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:sr-only"><tr role="row" class="col-span-full grid grid-cols-subgrid border-b-2 border-mc-ink [&>th]:py-2 [&>th]:text-left [&>th]:text-[.72rem] [&>th]:font-bold [&>th]:tracking-[.1em] [&>th]:text-mc-muted [&>th]:uppercase"><th role="columnheader" scope="col">Item</th><th role="columnheader" scope="col" class="text-right!">Qty</th><th role="columnheader" scope="col" class="text-right!">Price</th><th role="columnheader" scope="col" class="text-right!">Amount</th></tr></thead>
      <tbody role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:block"><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Leather rebinding<span class="block text-[.84rem] font-normal text-mc-muted">19th-century ledgers, half calf</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$180.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$1,080.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Custom box enclosures<span class="block text-[.84rem] font-normal text-mc-muted">Acid-free board, cloth covered</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$42.50</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$255.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Spine label tooling<span class="block text-[.84rem] font-normal text-mc-muted">Gold leaf, two lines</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">6</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$15.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$90.00</td></tr><tr role="row" class="col-span-full grid grid-cols-subgrid items-baseline border-b border-mc-line [&>*]:py-[13px] @max-[520px]/invoice:grid-cols-[auto_auto_minmax(0,1fr)] @max-[520px]/invoice:gap-x-1.5 @max-[520px]/invoice:py-2.5 @max-[520px]/invoice:[&>*]:py-0"><th role="rowheader" scope="row" class="text-left font-semibold @max-[520px]/invoice:col-span-full">Condition report<span class="block text-[.84rem] font-normal text-mc-muted">Photographed, per collection</span></th><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted @max-[520px]/invoice:after:content-['_×']" data-label="Qty">1</td><td role="cell" class="text-right whitespace-nowrap @max-[520px]/invoice:text-[.86rem] @max-[520px]/invoice:text-mc-muted" data-label="Price">$120.00</td><td role="cell" class="text-right font-semibold whitespace-nowrap @max-[520px]/invoice:col-start-3">$120.00</td></tr></tbody>
      <tfoot role="rowgroup" class="col-span-full grid grid-cols-subgrid @max-[520px]/invoice:block [&>tr:first-child>*]:pt-3.5">
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2"><th role="rowheader" scope="row" colspan="3">Subtotal</th><td role="cell">$1,545.00</td></tr>
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2"><th role="rowheader" scope="row" colspan="3">Sales tax 8.875%</th><td role="cell">$137.12</td></tr>
        <tr role="row" class="col-span-full grid grid-cols-subgrid [&>th]:col-[1/4] [&>th]:py-1 [&>th]:text-right [&>th]:font-normal [&>th]:text-mc-muted [&>td]:col-start-4 [&>td]:py-1 [&>td]:text-right @max-[520px]/invoice:grid-cols-[minmax(0,1fr)_auto] @max-[520px]/invoice:gap-x-4 @max-[520px]/invoice:[&>th]:col-[1] @max-[520px]/invoice:[&>td]:col-start-2 [&>*]:pt-2.5! [&>*]:text-[1.15rem] [&>*]:font-extrabold! [&>*]:text-mc-ink!"><th role="rowheader" scope="row" colspan="3">Total (USD)</th><td role="cell">$1,682.12</td></tr>
      </tfoot>
    </table>
    <p class="px-8 pt-[22px] pb-7 text-[.86rem] text-pretty text-mc-muted @max-[520px]/invoice:px-[18px]">Pay by check to Kestrel & Finch Bindery LLC or by ACH, reference KF-0731. Thank you for trusting us with the ledgers.</p>
    <div class="pointer-events-none absolute bottom-[70px] left-8 scale-140 -rotate-12 rounded-lg border-[3px] border-[#15803d] px-[18px] py-1.5 text-[1.6rem] font-black tracking-[.2em] text-[#15803d] uppercase opacity-0 transition-[opacity,scale] duration-250 motion-reduce:transition-none group-has-[input:checked]/mc:scale-100 group-has-[input:checked]/mc:opacity-90 @max-[520px]/invoice:top-24 @max-[520px]/invoice:bottom-auto @max-[520px]/invoice:left-auto @max-[520px]/invoice:right-4 @max-[520px]/invoice:text-[1.2rem]" aria-hidden="true">Paid</div>
  </div>
  <label class="mt-3.5 inline-flex cursor-pointer items-center gap-2.5 text-[.86rem] font-semibold print:hidden"><input class="relative m-0 h-[22px] w-10 cursor-pointer appearance-none rounded-full bg-[#8a7d82] transition-colors duration-200 after:absolute after:top-[3px] after:left-[3px] after:size-4 after:rounded-full after:bg-white after:transition-transform after:duration-200 checked:bg-[#15803d] checked:after:translate-x-[18px] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-mc-accent motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" role="switch"><span>Show as paid</span></label>
</article>
</div>
</div>
CSS 
@theme {
  --color-mc-accent: #be123c;
  --color-mc-ink: #231a1e;
  --color-mc-muted: #5f5257;
  --color-mc-line: #eadde1;
}
/* @container, grid-cols-subgrid and group-has-[] in the markup do the work; ARIA table roles keep the table's
   semantics while it is displayed as a grid. */
@page { size: auto; margin: 12mm; }
@media print { tr { break-inside: avoid; } }

About this set

One invoice component shown twice, in a wide slot and in a 340 pixel side panel, to show it laying itself out by the width of its own container rather than the viewport. In a wide slot it has a tinted header, four detail columns and a four-column line items table; in a narrow slot the header stacks, the details fall into two columns, and every line becomes a two-line card with the description on top and quantity times price beside the amount. The table is a CSS grid whose thead, tbody, tfoot and rows all use grid-template-columns:subgrid, so every row shares the same column tracks and long descriptions never push the figures out of line. Because changing a table’s display can drop its semantics in some browsers, the elements carry explicit table, rowgroup, row, columnheader, rowheader and cell roles. A Show as paid switch uses :has() to add a rotated PAID stamp and swap the status and balance, with no JavaScript. Figures use tabular-nums, the header tint is mixed with color-mix() and kept in print by print-color-adjust:exact.

What’s included

  • Container queries: the invoice reflows by its own width, not the viewport
  • Subgrid line items that share one set of column tracks
  • Explicit ARIA table roles keep the semantics under display:grid
  • :has() switch that stamps the invoice as paid without JavaScript
  • tabular-nums, color-mix() and print-color-adjust:exact

Accessibility

The line items keep table semantics through explicit ARIA roles, a caption and scoped headers, and in the narrow layout the column headers stay available to screen readers while hidden visually. The paid switch is a checkbox with role="switch" and a visible label, the stamp is decorative and hidden from assistive technology, and the switch and stamp transitions stop under prefers-reduced-motion.

Customise it

Change --mc-accent, --mc-ink, --mc-muted and --mc-line on .mc, and the 520px breakpoint in the @container invoice rule. Bootstrap adds .card, .badge and .form-switch around the same CSS; Tailwind uses @container/invoice, @max-[520px]/invoice:, grid-cols-subgrid and group-has-[input:checked]/mc: in the markup.