Statement

Statement, page 1 — Statement — rendered output

A statement of account with open items, aged buckets (oldest bucket in the accent, per the system’s accent policy), and an activity summary that must close to the same total the buckets sum to. Change the open items and re-derive the buckets and activity figures together — all three views reconcile to 35,731.24 in the sample (data.json carries the chain). The bucket figures are Georgia at 19px-equivalent with the total carrying a 2px accent rule. Engine features exercised: @page margin boxes with page counters, aged-bucket typography, accent-ruled table totals under border-collapse edge ownership, split columns via explicit widths. Render it:

npx @formepdf/html templates/statement/index.html -o statement.pdf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Statement of account BW-0091 — 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="atop"></div>
<div class="pagefill">

<header>
  <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>ar@northmoorgroup.com</div>
  </div>
  <div class="hr2 mast-divider"></div>

  <div class="dochead">
    <div>
      <div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Accounts receivable</div>
      <h1 class="dtitle">Statement of account</h1>
    </div>
    <div style="text-align: right">
      <div class="lbl" style="margin-bottom: 5.25pt">As at</div>
      <div class="refnum">07 September 2026</div>
    </div>
  </div>
</header>

<div class="meta meta-doc">
  <div><div class="lbl">Account</div>Brightwater Foods LLC<br>Accounts Payable<br>2140 Carnegie Avenue<br>Cleveland, OH 44115</div>
  <div><div class="lbl">Account no.</div>BW-0091<div class="lbl meta-gap">Credit limit</div>50,000.00</div>
  <div><div class="lbl">Terms</div>Net 30 days<div class="lbl meta-gap">Statement period</div>01 May – 07 Sep 2026</div>
  <div><div class="lbl">Contact</div>M. Okonjo, Controller<div class="lbl meta-gap">Ext.</div>214</div>
</div>

<h2 class="lbl sect" style="border-bottom: 0 solid #FDFCFA; padding-bottom: 0">Open items</h2>
<table class="t">
  <thead>
    <tr>
      <th scope="col" style="width: 72pt">Document</th>
      <th scope="col" style="width: 60pt">Date</th>
      <th scope="col" style="width: 60pt">Due</th>
      <th scope="col">Reference</th>
      <th scope="col" class="num" style="width: 42pt">Days</th>
      <th scope="col" class="num" style="width: 69pt">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>INV-4102</td><td>29 May 2026</td><td>28 Jun 2026</td><td>PO 44-7188 · disputed freight</td><td class="num">101</td><td class="num">3,150.00</td></tr>
    <tr><td>INV-4290</td><td>12 Jul 2026</td><td>11 Aug 2026</td><td>PO 44-7422</td><td class="num">57</td><td class="num">12,410.00</td></tr>
    <tr><td>INV-4341</td><td>03 Aug 2026</td><td>02 Sep 2026</td><td>PO 44-7561</td><td class="num">35</td><td class="num">6,880.55</td></tr>
    <tr><td>INV-4388</td><td>21 Aug 2026</td><td>20 Sep 2026</td><td>PO 44-7640</td><td class="num">17</td><td class="num">9,244.10</td></tr>
    <tr><td>INV-4417</td><td>07 Sep 2026</td><td>07 Oct 2026</td><td>PO 44-7712</td><td class="num">0</td><td class="num">4,647.07</td></tr>
    <tr><td>CN-0392</td><td>07 Sep 2026</td><td>—</td><td>RMA-1188, credit</td><td class="num">0</td><td class="num">(600.48)</td></tr>
    <tr class="gsub"><td></td><td></td><td></td><td>Total outstanding</td><td class="num"></td><td class="num">35,731.24</td></tr>
  </tbody>
</table>

<h2 class="lbl sect" style="border-bottom: 0 solid #FDFCFA; padding-bottom: 0">Ageing</h2>
<table class="t">
  <thead>
    <tr>
      <th scope="col" class="num">Current</th>
      <th scope="col" class="num">1–30 days</th>
      <th scope="col" class="num">31–60 days</th>
      <th scope="col" class="num">61–90 days</th>
      <th scope="col" class="num">91 days and over</th>
      <th scope="col" class="num">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="aged">4,046.59</td>
      <td class="aged">9,244.10</td>
      <td class="aged">19,290.55</td>
      <td class="aged aged-dim">0.00</td>
      <td class="aged aged-accent">3,150.00</td>
      <td class="aged aged-total">35,731.24</td>
    </tr>
  </tbody>
</table>

<div class="twocol">
  <div style="flex-grow: 1">
    <h2 class="lbl" style="margin: 0 0 5.25pt">Activity this period</h2>
    <table class="t mini">
      <tbody>
        <tr><th scope="row" class="rlab">Opening balance, 01 May 2026</th><td class="num">14,880.00</td></tr>
        <tr><th scope="row" class="rlab">Invoiced</th><td class="num">54,061.72</td></tr>
        <tr><th scope="row" class="rlab">Credits issued</th><td class="num">(600.48)</td></tr>
        <tr class="pre-total"><th scope="row" class="rlab">Payments received</th><td class="num">(32,610.00)</td></tr>
        <tr class="mini-total"><th scope="row" class="rlab">Closing balance</th><td class="num">35,731.24</td></tr>
      </tbody>
    </table>
  </div>
  <div style="flex-grow: 1">
    <h2 class="lbl" style="margin: 0 0 5.25pt">Action requested</h2>
    <div class="action">Invoice INV-4102 has been outstanding for 101 days pending resolution of a freight discrepancy; our credit department expects to close this by 19 September. Please remit 19,290.55 covering INV-4290 and INV-4341, both now past due. Accounts over sixty days may be placed on order hold under our conditions of sale.</div>
  </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</div>
  <div style="flex-grow: 1"><div class="lbl">Note</div>This statement lists open items only. Paid documents are available on request. Amounts in US dollars.</div>
</footer>

</div>
</div>
</body>
</html>

/* statement — 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: "Statement · Account BW-0091 · 07 September 2026";
    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.4fr 1fr 1fr 1fr; }
.sect { margin: 22.5pt 0 7.5pt; } /* 30px / 10px */
.twocol { display: flex; gap: 27pt; margin-top: 22.5pt; }
td.aged-dim { color: #8A857E; }
td.aged-accent { color: #7B2233; }
td.aged-total { border-top: 1.5pt solid #7B2233; }
.action { font-family: Georgia, 'Times New Roman', serif; font-size: 7.5pt; line-height: 1.65; }

/* Equal/ratio split columns: explicit widths (flex basis is not in
 * the subset; grow alone leaves intrinsic-width columns). */
.twocol > div { width: 47%; }

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": "ar@northmoorgroup.com"
  },
  "document": {
    "type": "statement",
    "asAt": "07 September 2026",
    "account": "BW-0091",
    "creditLimit": 50000.0,
    "terms": "Net 30 days",
    "period": "01 May – 07 Sep 2026",
    "contact": "M. Okonjo, Controller",
    "ext": "214"
  },
  "accountHolder": {
    "name": "Brightwater Foods LLC",
    "lines": [
      "Accounts Payable",
      "2140 Carnegie Avenue",
      "Cleveland, OH 44115"
    ]
  },
  "openItems": [
    {
      "document": "INV-4102",
      "date": "29 May 2026",
      "due": "28 Jun 2026",
      "reference": "PO 44-7188 · disputed freight",
      "days": 101,
      "amount": 3150.0
    },
    {
      "document": "INV-4290",
      "date": "12 Jul 2026",
      "due": "11 Aug 2026",
      "reference": "PO 44-7422",
      "days": 57,
      "amount": 12410.0
    },
    {
      "document": "INV-4341",
      "date": "03 Aug 2026",
      "due": "02 Sep 2026",
      "reference": "PO 44-7561",
      "days": 35,
      "amount": 6880.55
    },
    {
      "document": "INV-4388",
      "date": "21 Aug 2026",
      "due": "20 Sep 2026",
      "reference": "PO 44-7640",
      "days": 17,
      "amount": 9244.1
    },
    {
      "document": "INV-4417",
      "date": "07 Sep 2026",
      "due": "07 Oct 2026",
      "reference": "PO 44-7712",
      "days": 0,
      "amount": 4647.07
    },
    {
      "document": "CN-0392",
      "date": "07 Sep 2026",
      "due": null,
      "reference": "RMA-1188, credit",
      "days": 0,
      "amount": -600.48
    }
  ],
  "totalOutstanding": 35731.24,
  "ageing": {
    "current": 4046.59,
    "d1to30": 9244.1,
    "d31to60": 19290.55,
    "d61to90": 0.0,
    "d91plus": 3150.0,
    "total": 35731.24
  },
  "activity": {
    "opening": 14880.0,
    "invoiced": 54061.72,
    "credits": -600.48,
    "payments": -32610.0,
    "closing": 35731.24
  }
}

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