Remittance Advice

A remittance advice listing invoices paid, discounts taken and a credit memo, with a holds column explaining short payment. Change the payment lines first — gross minus discount must equal paid, and the hold note names what is withheld and when it releases (data.json chains to PO-77412). Engine features exercised: @page margin boxes with page counters, border-collapse tables with a gsub total row, accent amount block, split columns. Render it:

npx @formepdf/html templates/remittance-advice/index.html -o remittance-advice.pdf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remittance advice RA-20268 — 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">Accounts Payable</div>
      </div>
    </div>
    <div class="addr" style="text-align: right">418 Ellingham Road, Suite 300<br>Rochester, NY 14604<br>(585) 274-0180<br>ap@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 payable · not a negotiable instrument</div>
      <h1 class="dtitle">Remittance advice</h1>
    </div>
    <div style="text-align: right">
      <div class="lbl" style="margin-bottom: 5.25pt">Advice number</div>
      <div class="refnum">RA-20268</div>
    </div>
  </div>
</header>

<div class="meta meta-doc">
  <div><div class="lbl">To</div>Tanaka Precision Parts, Inc.<br>Accounts Receivable<br>860 Industrial Drive<br>Elkhart, IN 46514</div>
  <div><div class="lbl">Payment date</div>15 September 2026<div class="lbl meta-gap">Method</div>ACH credit</div>
  <div><div class="lbl">Trace number</div>021304559-100482<div class="lbl meta-gap">Supplier no.</div>TPP-0143</div>
  <div><div class="lbl">Prepared by</div>L. Nkemdirim<div class="lbl meta-gap">Currency</div>USD</div>
</div>

<p class="intro intro-ra">The payment described below has been released to the bank account we hold on file. This advice is for reconciliation only and is not a negotiable instrument.</p>

<table class="t items">
  <thead>
    <tr>
      <th scope="col" style="width: 72pt">Invoice</th>
      <th scope="col" style="width: 61.5pt">Date</th>
      <th scope="col">Reference</th>
      <th scope="col" class="num" style="width: 66pt">Gross</th>
      <th scope="col" class="num" style="width: 66pt">Discount</th>
      <th scope="col" class="num" style="width: 69pt">Paid</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>T-8841</td><td>04 Aug 2026</td><td>PO-77188 · 2% early settlement</td><td class="num">3,120.00</td><td class="num">62.40</td><td class="num">3,057.60</td></tr>
    <tr><td>T-8902</td><td>21 Aug 2026</td><td>PO-77412 line 02, partial</td><td class="num">5,060.00</td><td class="num">0.00</td><td class="num">5,060.00</td></tr>
    <tr><td>T-8930</td><td>28 Aug 2026</td><td>PO-77412 line 03</td><td class="num">840.00</td><td class="num">0.00</td><td class="num">840.00</td></tr>
    <tr><td>TC-114</td><td>29 Aug 2026</td><td>Credit memo — scrap allowance</td><td class="num">(215.00)</td><td class="num">0.00</td><td class="num">(215.00)</td></tr>
    <tr class="gsub"><td></td><td></td><td>Total remitted</td><td class="num">8,805.00</td><td class="num">62.40</td><td class="num">8,742.60</td></tr>
  </tbody>
</table>

<div class="due">
  <span class="lbl" style="color: #111111">Total paid</span>
  <span class="due-figure">$8,742.60</span>
</div>

<div class="twocol">
  <div style="flex-grow: 1">
    <h2 class="lbl" style="margin: 0 0 5.25pt">Deductions and holds</h2>
    <div class="holds">Invoice T-8902 is paid in part; 1,240.00 remains on hold pending receipt of the material certificate required by purchase order line 02. It will be released on the next payment run, 30 September 2026.</div>
  </div>
  <div style="flex-grow: 1">
    <h2 class="lbl" style="margin: 0 0 5.25pt">Payment runs</h2>
    <table class="t mini">
      <tbody>
        <tr><th scope="row" class="rlab">Current run</th><td class="num">15 Sep 2026</td></tr>
        <tr><th scope="row" class="rlab">Next run</th><td class="num">30 Sep 2026</td></tr>
        <tr><th scope="row" class="rlab">Cut-off for inclusion</th><td class="num">25 Sep 2026</td></tr>
      </tbody>
    </table>
  </div>
</div>

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

<footer class="foot">
  <div style="flex-grow: 1"><div class="lbl">Queries</div>Accounts payable, (585) 274-0180 ext. 118, quoting advice RA-20268.</div>
  <div style="flex-grow: 1"><div class="lbl">Bank details on file</div>Midwest Commerce Bank · account ending 4471. Changes to remittance details are accepted only by signed letter on supplier letterhead, verified by telephone callback.</div>
</footer>

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

/* remittance-advice — 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: "Remittance advice RA-20268 · Tanaka Precision Parts, Inc.";
    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; }
.intro-ra { margin-top: 18pt; } /* 24px */
.items { margin-top: 19.5pt; }
.twocol { display: flex; gap: 27pt; margin-top: 25.5pt; } /* 36px / 34px */
.holds { font-size: 7.125pt; line-height: 1.75; }

/* 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": "ap@northmoorgroup.com",
    "department": "Accounts Payable"
  },
  "document": {
    "type": "remittance-advice",
    "number": "RA-20268",
    "paymentDate": "15 September 2026",
    "method": "ACH credit",
    "trace": "021304559-100482",
    "supplierNo": "TPP-0143",
    "preparedBy": "L. Nkemdirim",
    "currency": "USD"
  },
  "payee": {
    "name": "Tanaka Precision Parts, Inc.",
    "lines": [
      "Accounts Receivable",
      "860 Industrial Drive",
      "Elkhart, IN 46514"
    ]
  },
  "lines": [
    {
      "invoice": "T-8841",
      "date": "04 Aug 2026",
      "reference": "PO-77188 · 2% early settlement",
      "gross": 3120.0,
      "discount": 62.4,
      "paid": 3057.6
    },
    {
      "invoice": "T-8902",
      "date": "21 Aug 2026",
      "reference": "PO-77412 line 02, partial",
      "gross": 5060.0,
      "discount": 0.0,
      "paid": 5060.0
    },
    {
      "invoice": "T-8930",
      "date": "28 Aug 2026",
      "reference": "PO-77412 line 03",
      "gross": 840.0,
      "discount": 0.0,
      "paid": 840.0
    },
    {
      "invoice": "TC-114",
      "date": "29 Aug 2026",
      "reference": "Credit memo — scrap allowance",
      "gross": -215.0,
      "discount": 0.0,
      "paid": -215.0
    }
  ],
  "totals": {
    "gross": 8805.0,
    "discount": 62.4,
    "paid": 8742.6
  },
  "hold": {
    "invoice": "T-8902",
    "amount": 1240.0,
    "reason": "material certificate required by purchase order line 02",
    "release": "30 September 2026"
  }
}

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

Remittance Advice