Detailed Invoice

A three-page progress-billing invoice with grouped line-item sections, section subtotals, a carried-forward/brought-forward pair at the page 2/3 boundary, and a retainage-and-tax totals stack. Change the sections and their sums first — the summary table, carried-forward figure and totals must keep reconciling (data.json carries the chain). Deviations from the prototype, by engine policy: the running header is three margin boxes without the hairline beneath (margin-box borders do not render), and both continuation pages share one section label, ‘Detail, sections A–E’ (a per-page label via named pages currently leaves a trailing blank page). Engine features exercised: @page :first, three running-header margin boxes, page counters, break-before: page, repeated <thead>, grouped table sections with colspan, accent keyline subtotal rows. Render it:

npx @formepdf/html templates/invoice-detailed/index.html -o invoice-detailed.pdf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoice INV-4421 — Northmoor Industrial Group, Inc.</title>
<link rel="stylesheet" href="../northmoor-shared.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sheet">
<div class="pagefill">

<header>
<div class="atop"></div>
  <div class="hd">
    <div class="mast-left">
      <div class="mark">N</div>
      <div>
        <div class="wm">Northmoor</div>
        <div class="sub" style="margin-top: 3pt">Industrial Group, Inc.</div>
      </div>
    </div>
    <div class="addr" style="text-align: right">418 Ellingham Road, Suite 300<br>Rochester, NY 14604<br>(585) 274-0180<br>projects@northmoorgroup.com</div>
  </div>
  <div class="hr2 mast-divider"></div>

  <div class="dochead">
    <div>
      <div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Progress billing · contract 2026-CS-04</div>
      <h1 class="dtitle">Invoice</h1>
    </div>
    <div style="text-align: right">
      <div class="lbl" style="margin-bottom: 5.25pt">Invoice number</div>
      <div class="refnum">INV-4421</div>
    </div>
  </div>
</header>

<div class="meta meta-doc">
  <div><div class="lbl">Bill to</div>Kestrel Medical Center<br>Facilities Contracts, Rm B-118<br>1465 Whitmore Parkway<br>Cleveland, OH 44106</div>
  <div><div class="lbl">Project</div>Central Sterile — Utility Skid Replacement<br>Contract 2026-CS-04<br>Change orders 1–3 included</div>
  <div><div class="lbl">Issued</div>07 September 2026<div class="lbl meta-gap">Period</div>01–31 August 2026</div>
  <div><div class="lbl">Terms</div>Net 30 · Due 07 Oct 2026<div class="lbl meta-gap">Pages</div>3 (detail follows)</div>
</div>

<h2 class="lbl sect-label" style="border-bottom: 0 solid #FDFCFA; padding-bottom: 0">Summary by section</h2>
<table class="t">
  <thead>
    <tr>
      <th scope="col" style="width: 30pt">Sec</th>
      <th scope="col">Section</th>
      <th scope="col" class="num" style="width: 45pt">Lines</th>
      <th scope="col" class="num" style="width: 52.5pt">Taxable</th>
      <th scope="col" class="num" style="width: 82.5pt">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>Fabricated assemblies</td><td class="num">4</td><td class="num">Yes</td><td class="num">16,736.00</td></tr>
    <tr><td>B</td><td>Piping &amp; fittings</td><td class="num">5</td><td class="num">Yes</td><td class="num">10,422.30</td></tr>
    <tr><td>C</td><td>Electrical &amp; controls</td><td class="num">4</td><td class="num">Yes</td><td class="num">18,003.00</td></tr>
    <tr><td>D</td><td>Site labor</td><td class="num">4</td><td class="num">No</td><td class="num">34,832.00</td></tr>
    <tr><td>E</td><td>Freight, handling &amp; permits</td><td class="num">3</td><td class="num">No</td><td class="num">5,645.00</td></tr>
    <tr class="gsub"><td></td><td>Total goods and services</td><td class="num">20</td><td></td><td class="num">85,638.30</td></tr>
  </tbody>
</table>

<div class="twocol">
  <div style="flex-grow: 1">
    <h2 class="lbl" style="margin: 0 0 4.5pt">Scope this period</h2>
    <div class="scope">Four utility skids were fabricated, delivered and set in place; process piping was run to the tie-in points at the west wall; and the two control panels were mounted and terminated. Commissioning is scheduled for the week of 21 September and is not billed here. Retainage of five percent is withheld under Article 7 of the contract and is released on substantial completion.</div>
  </div>
  <div class="status">
    <h2 class="lbl" style="margin: 0 0 4.5pt">Contract status</h2>
    <table class="t mini">
      <tbody>
        <tr><th scope="row" class="rlab">Contract value</th><td class="num">142,500.00</td></tr>
        <tr><th scope="row" class="rlab">Change orders 1–3</th><td class="num">11,880.00</td></tr>
        <tr class="pre-total"><th scope="row" class="rlab">Billed to date</th><td class="num">85,638.30</td></tr>
        <tr class="mini-total"><th scope="row" class="rlab">Remaining</th><td class="num">68,741.70</td></tr>
      </tbody>
    </table>
  </div>
</div>

<div class="pagefill-spacer"></div>

<footer class="foot">
  <div style="flex-grow: 1"><div class="lbl">Remit to</div>First Genesee Bank, Rochester NY · Account 8841 002937 · Routing 021304559 · Reference INV-4421</div>
  <div style="flex-grow: 1"><div class="lbl">Detail</div>Sections A–C are itemised on page 2; sections D–E and the tax computation are on page 3. The header row repeats on every page.</div>
</footer>

</div>

<div class="p2">
<table class="t">
  <thead>
    <tr>
      <th scope="col" style="width: 39pt">Line</th>
      <th scope="col">Description</th>
      <th scope="col" class="num" style="width: 48pt">Qty</th>
      <th scope="col" style="width: 30pt">Unit</th>
      <th scope="col" class="num" style="width: 57pt">Rate</th>
      <th scope="col" class="num" style="width: 64.5pt">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ghead"><td colspan="6">Section A — Fabricated assemblies</td></tr>
    <tr><td>A-01</td><td>Skid frame, welded tube, 96 × 48 in, primed<br><span class="dim">Drawing 4471-A rev C · shop order 20918</span></td><td class="num">4</td><td>ea</td><td class="num">1,485.00</td><td class="num">5,940.00</td></tr>
    <tr><td>A-02</td><td>Access platform, galvanized grating, with handrail</td><td class="num">2</td><td>ea</td><td class="num">2,240.00</td><td class="num">4,480.00</td></tr>
    <tr><td>A-03</td><td>Guard panel, perforated steel, powder coat black</td><td class="num">12</td><td>ea</td><td class="num">318.00</td><td class="num">3,816.00</td></tr>
    <tr><td>A-04</td><td>Mounting bracket, machined, dwg 4471-B</td><td class="num">40</td><td>ea</td><td class="num">62.50</td><td class="num">2,500.00</td></tr>
    <tr class="gsub"><td></td><td>Subtotal, section A</td><td class="num"></td><td></td><td></td><td class="num">16,736.00</td></tr>
    <tr class="ghead"><td colspan="6">Section B — Piping &amp; fittings</td></tr>
    <tr><td>B-01</td><td>Pipe, carbon steel Sch 40, 2 in, 21 ft length</td><td class="num">34</td><td>len</td><td class="num">88.20</td><td class="num">2,998.80</td></tr>
    <tr><td>B-02</td><td>Elbow, butt weld 90°, 2 in, long radius</td><td class="num">96</td><td>ea</td><td class="num">14.75</td><td class="num">1,416.00</td></tr>
    <tr><td>B-03</td><td>Ferrule, sanitary tri-clamp, 2 in, 316L</td><td class="num">120</td><td>ea</td><td class="num">9.40</td><td class="num">1,128.00</td></tr>
    <tr><td>B-04</td><td>Ball valve, 2 in full port, lockable handle</td><td class="num">18</td><td>ea</td><td class="num">214.00</td><td class="num">3,852.00</td></tr>
    <tr><td>B-05</td><td>Pipe hanger, adjustable clevis, with rod</td><td class="num">150</td><td>ea</td><td class="num">6.85</td><td class="num">1,027.50</td></tr>
    <tr class="gsub"><td></td><td>Subtotal, section B</td><td class="num"></td><td></td><td></td><td class="num">10,422.30</td></tr>
    <tr class="ghead"><td colspan="6">Section C — Electrical &amp; controls</td></tr>
    <tr><td>C-01</td><td>Control panel, NEMA 4X, 36 × 30 in, UL 508A labelled</td><td class="num">2</td><td>ea</td><td class="num">4,860.00</td><td class="num">9,720.00</td></tr>
    <tr><td>C-02</td><td>Variable frequency drive, 10 hp, 480 V</td><td class="num">4</td><td>ea</td><td class="num">1,275.00</td><td class="num">5,100.00</td></tr>
    <tr><td>C-03</td><td>Cable, 12/3 SO, in tray, per linear foot</td><td class="num">900</td><td>ft</td><td class="num">2.15</td><td class="num">1,935.00</td></tr>
    <tr><td>C-04</td><td>Junction box, cast aluminium, with gland plate</td><td class="num">16</td><td>ea</td><td class="num">78.00</td><td class="num">1,248.00</td></tr>
    <tr class="gsub"><td></td><td>Subtotal, section C</td><td class="num"></td><td></td><td></td><td class="num">18,003.00</td></tr>
    <tr class="carry"><td></td><td>Carried forward to page 3</td><td></td><td></td><td></td><td class="num">45,161.30</td></tr>
  </tbody>
</table>
<div class="cont">Continued on page 3 — sections D and E</div>
</div>

<div class="p3">
<table class="t">
  <thead>
    <tr>
      <th scope="col" style="width: 39pt">Line</th>
      <th scope="col">Description</th>
      <th scope="col" class="num" style="width: 48pt">Qty</th>
      <th scope="col" style="width: 30pt">Unit</th>
      <th scope="col" class="num" style="width: 57pt">Rate</th>
      <th scope="col" class="num" style="width: 64.5pt">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td class="broughtlab">Brought forward from page 2 — sections A–C</td><td></td><td></td><td></td><td class="num">45,161.30</td></tr>
    <tr class="ghead"><td colspan="6">Section D — Site labor (not subject to sales tax)</td></tr>
    <tr><td>D-01</td><td>Millwright, straight time<br><span class="dim">Certified payroll attached · weeks 32–35</span></td><td class="num">168</td><td>hr</td><td class="num">96.00</td><td class="num">16,128.00</td></tr>
    <tr><td>D-02</td><td>Millwright, overtime, Saturday tie-in</td><td class="num">22</td><td>hr</td><td class="num">144.00</td><td class="num">3,168.00</td></tr>
    <tr><td>D-03</td><td>Electrician, straight time</td><td class="num">104</td><td>hr</td><td class="num">104.00</td><td class="num">10,816.00</td></tr>
    <tr><td>D-04</td><td>Site supervision and coordination</td><td class="num">40</td><td>hr</td><td class="num">118.00</td><td class="num">4,720.00</td></tr>
    <tr class="gsub"><td></td><td>Subtotal, section D</td><td></td><td></td><td></td><td class="num">34,832.00</td></tr>
    <tr class="ghead"><td colspan="6">Section E — Freight, handling &amp; permits</td></tr>
    <tr><td>E-01</td><td>Flatbed freight, Rochester to Cleveland</td><td class="num">3</td><td>load</td><td class="num">1,180.00</td><td class="num">3,540.00</td></tr>
    <tr><td>E-02</td><td>Crating, blocking and export packing</td><td class="num">1</td><td>lot</td><td class="num">865.00</td><td class="num">865.00</td></tr>
    <tr><td>E-03</td><td>Municipal permit fees, billed at cost</td><td class="num">1</td><td>lot</td><td class="num">1,240.00</td><td class="num">1,240.00</td></tr>
    <tr class="gsub"><td></td><td>Subtotal, section E</td><td></td><td></td><td></td><td class="num">5,645.00</td></tr>
  </tbody>
</table>

<table class="tt">
  <tbody>
    <tr><td>Total goods and services</td><td class="num">85,638.30</td></tr>
    <tr><td>Less retainage withheld, 5% (Article 7)</td><td class="num">(4,281.92)</td></tr>
    <tr><td>Taxable base 45,161.30 · OH sales tax 8.00%</td><td class="num">3,612.90</td></tr>
    <tr><td>Less deposit received 12 Aug 2026</td><td class="num">(25,000.00)</td></tr>
    <tr class="total"><td>Balance due</td><td class="num">59,969.28</td></tr>
  </tbody>
</table>

<div class="due">
  <span class="lbl" style="color: #111111">Amount due</span>
  <span class="due-figure">$59,969.28</span>
</div>

<footer class="foot" style="margin-top: 16.5pt">
  <div style="flex-grow: 1"><div class="lbl">Certification</div>The undersigned certifies that the work described has been performed and that amounts previously billed have been paid or credited.<div class="certline">R. A. Halloran · Project Manager</div></div>
  <div style="flex-grow: 1"><div class="lbl">Remit to</div>First Genesee Bank, Rochester NY · Account 8841 002937 · Routing 021304559 · Reference INV-4421. Retainage released on substantial completion and lien waiver.</div>
</footer>
</div>
</div>
</body>
</html>

/* invoice-detailed — page geometry and document-specific rules.
 * Spine comes from ../northmoor-shared.css. */

@page {
  size: Letter;
  margin: 52.5pt 57pt 40.5pt; /* 70px 76px 54px */
  @bottom-left {
    content: "Invoice INV-4421 · Kestrel Medical Center · Contract 2026-CS-04";
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8A857E;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8A857E;
  }
}

/* First-page 4px full-bleed accent head rule (escapes into the margin). */
.sheet { position: relative; }
.atop {
  position: absolute;
  top: -52.5pt;
  left: -57pt;
  right: -57pt;
  height: 3pt;
  background-color: #7B2233;
}
.meta-doc { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; }
.sect-label { margin: 24pt 0 7.5pt; } /* 32px / 10px */
.twocol { display: flex; gap: 24pt; margin-top: 22.5pt; } /* 32px / 30px */
.scope { font-family: Georgia, 'Times New Roman', serif; font-size: 7.5pt; line-height: 1.65; }
.status { width: 195pt; } /* 260px */
.certline { border-top: 0.75pt solid #111111; width: 150pt; padding-top: 3.75pt; font-size: 6.375pt; margin-top: 9pt; }

/* Continuation pages: running header via three margin boxes, suppressed
 * on the first page; hairline rule on all three boxes (renders as one
 * continuous line); per-page section labels via the named pages below. */
@page {
  @top-left {
    content: "Northmoor · Invoice INV-4421";
    color: #7B2233;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 5.625pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 0.75pt solid #111111;
    padding-bottom: 6pt;
  }
  @top-center {
    content: "Kestrel Medical Center — Contract 2026-CS-04";
    color: #5F5A53;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 0.75pt solid #111111;
    padding-bottom: 6pt;
  }
  @top-right {
    content: "Detail, sections A–E";
    color: #5F5A53;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 0.75pt solid #111111;
    padding-bottom: 6pt;
  }
}
@page :first {
  @top-left { content: none }
  @top-center { content: none }
  @top-right { content: none }
}
.p2 { page: detail-ac }
.p3 { break-before: page; page: detail-de }

/* Per-page section labels (the design's page-2/page-3 running headers).
 * Named pages carry the base geometry; only the @top-right band differs. */
@page detail-ac {
  @top-right {
    content: "Detail, sections A–C";
    color: #5F5A53;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 0.75pt solid #111111;
    padding-bottom: 6pt;
  }
}
@page detail-de {
  @top-right {
    content: "Detail, sections D–E and tax";
    color: #5F5A53;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 5.625pt;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 0.75pt solid #111111;
    padding-bottom: 6pt;
  }
}

Both files assume northmoor-shared.css alongside them — the set’s shared spine (type scale, tables, signature blocks, the accent).

Sample data (data.json)

data.json

{
  "issuer": {
    "name": "Northmoor Industrial Group, Inc.",
    "address": "418 Ellingham Road, Suite 300, Rochester, NY 14604",
    "phone": "(585) 274-0180",
    "ein": "16-1904472",
    "bank": {
      "name": "First Genesee Bank, Rochester NY",
      "account": "8841 002937",
      "routing": "021304559"
    },
    "email": "projects@northmoorgroup.com"
  },
  "document": {
    "type": "invoice",
    "number": "INV-4421",
    "eyebrow": "Progress billing · contract 2026-CS-04",
    "issued": "07 September 2026",
    "period": "01–31 August 2026",
    "terms": "Net 30 · Due 07 Oct 2026",
    "pages": 3
  },
  "billTo": {
    "name": "Kestrel Medical Center",
    "lines": [
      "Facilities Contracts, Rm B-118",
      "1465 Whitmore Parkway",
      "Cleveland, OH 44106"
    ]
  },
  "project": {
    "name": "Central Sterile — Utility Skid Replacement",
    "contract": "2026-CS-04",
    "changeOrders": "1–3 included"
  },
  "sections": [
    {
      "id": "A",
      "name": "Fabricated assemblies",
      "lines": 4,
      "taxable": true,
      "amount": 16736.0
    },
    {
      "id": "B",
      "name": "Piping & fittings",
      "lines": 5,
      "taxable": true,
      "amount": 10422.3
    },
    {
      "id": "C",
      "name": "Electrical & controls",
      "lines": 4,
      "taxable": true,
      "amount": 18003.0
    },
    {
      "id": "D",
      "name": "Site labor",
      "lines": 4,
      "taxable": false,
      "amount": 34832.0
    },
    {
      "id": "E",
      "name": "Freight, handling & permits",
      "lines": 3,
      "taxable": false,
      "amount": 5645.0
    }
  ],
  "carriedForwardPage2": 45161.3,
  "contractStatus": {
    "value": 142500.0,
    "changeOrders": 11880.0,
    "billedToDate": 85638.3,
    "remaining": 68741.7
  },
  "totals": {
    "goodsAndServices": 85638.3,
    "retainagePct": 0.05,
    "retainage": 4281.92,
    "taxableBase": 45161.3,
    "taxRate": 0.08,
    "tax": 3612.9,
    "deposit": 25000.0,
    "balanceDue": 59969.28
  }
}

MIT-licensed, free to copy — source on GitHub. Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.

Getting Started

Template Library

Reference

API Reference

Concepts

Enterprise

SDKs

Guides

Changelog

Detailed Invoice