Delivery Note — rendered output
data.json first; quantity 72 is 73 shipped minus the DOC-QA envelope, and the 418 lb total must match the shipment.
Engine features exercised: checkbox lines as flex rows, write-in rules, four-slot signature row with narrow slots, single-page fill.
Render it:
npx @formepdf/html templates/delivery-note/index.html -o delivery-note.pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Delivery note DN-40118 — 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">Delivery Note · Consignee copy</div>
</div>
</div>
<div class="addr" style="text-align: right">2200 Lyell Avenue<br>Rochester, NY 14606<br>Form SH-03 rev. 2</div>
</div>
<div class="hr2" style="margin-top: 15pt"></div>
<div class="dochead">
<div>
<div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Shipping · copy 1 of 3, consignee</div>
<h1 class="dtitle">Delivery note</h1>
</div>
<div style="text-align: right">
<div class="lbl" style="margin-bottom: 5.25pt">Note number</div>
<div class="refnum">DN-40118</div>
</div>
</div>
</header>
<div class="meta meta-dn">
<div><div class="lbl">Consignee</div>Brightwater Foods LLC<br>Plant 2 — Receiving Dock 4<br>3900 Harvard Road<br>Cleveland, OH 44105</div>
<div><div class="lbl">Consignor</div>Northmoor Industrial Group, Inc.<br>Shipping Dock 2<br>2200 Lyell Avenue<br>Rochester, NY 14606</div>
<div><div class="lbl">Delivery date</div>09 September 2026<div class="lbl" style="margin-top: 9pt">Vehicle</div>Erie Valley 118 · NY DOT 44712</div>
<div><div class="lbl">Driver</div>C. Boudreau<div class="lbl" style="margin-top: 9pt">Reference</div>PS-88214 · PO 44-7712</div>
</div>
<table class="t lines">
<thead><tr><th scope="col" style="width: 33pt">Line</th><th scope="col">Description</th><th scope="col" class="num" style="width: 60pt">Quantity</th><th scope="col" style="width: 48pt">Unit</th><th scope="col" style="width: 60pt">Package</th><th scope="col" class="num" style="width: 60pt">Weight</th></tr></thead>
<tbody>
<tr><td>01</td><td>Skid frame, welded tube, 96 × 48 in, primed</td><td class="num">8</td><td>ea</td><td>Crate 1</td><td class="num">246 lb</td></tr>
<tr><td>02</td><td>Guard panel, perforated steel</td><td class="num">24</td><td>ea</td><td>Crate 2</td><td class="num">112 lb</td></tr>
<tr><td>03</td><td>Mounting bracket, machined</td><td class="num">32</td><td>ea</td><td>Crate 3</td><td class="num">44 lb</td></tr>
<tr><td>04</td><td>Fastener kit, stainless 316</td><td class="num">8</td><td>kit</td><td>Crate 3</td><td class="num">16 lb</td></tr>
<tr class="gsub"><td></td><td>Total, three pieces</td><td class="num">72</td><td></td><td></td><td class="num">418 lb</td></tr>
</tbody>
</table>
<h2 class="sh">Receipt of goods</h2>
<div class="prose measure82"><p>Goods received in the quantity and condition shown, subject to the exceptions noted below. Signature acknowledges receipt only and is not acceptance of the goods as conforming to the order. Concealed damage may be reported within ten days of this date.</p></div>
<div class="recrow">
<div class="box cond">
<div class="lbl" style="margin-bottom: 6pt">Condition on arrival</div>
<div class="cond-lines">
<div class="ckline"><div class="ck"></div><span>Received in good order</span></div>
<div class="ckline"><div class="ck"></div><span>Packaging damaged, contents checked</span></div>
<div class="ckline"><div class="ck"></div><span>Shortage — noted below</span></div>
<div class="ckline"><div class="ck"></div><span>Refused — reason below</span></div>
</div>
</div>
<div class="box exc">
<div class="lbl" style="margin-bottom: 6pt">Exceptions noted</div>
<div class="writein"></div>
<div class="writein"></div>
<div class="writein"></div>
<div class="writein"></div>
</div>
</div>
<div class="sig sig-dn">
<div class="sigbox"><div class="lbl">Received by — signature</div><div class="sigline">Signature</div></div>
<div class="sigbox"><div class="lbl">Print name and title</div><div class="sigline">Name · title</div></div>
<div class="sigbox halfslot"><div class="lbl">Date received</div><div class="sigline">Day · month · year</div></div>
<div class="sigbox halfslot"><div class="lbl">Time received</div><div class="sigline">24-hour clock</div></div>
</div>
<div class="pagefill-spacer"></div>
<footer class="foot">
<div style="flex-grow: 1">Copy 1 consignee · copy 2 carrier · copy 3 returned to Northmoor shipping office. Retain for twelve months.</div>
<div>DN-40118</div>
</footer>
</div>
</div>
</body>
</html>
/* delivery-note — consignee copy with receipt-of-goods signature block. */
@page {
size: Letter;
margin: 52.5pt 57pt 40.5pt;
@bottom-left {
content: "Delivery note DN-40118 · Brightwater Foods LLC";
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;
}
}
.sheet { position: relative; }
.atop { position: absolute; top: -52.5pt; left: -57pt; right: -57pt; height: 3pt; background-color: #7B2233; }
.meta-dn { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; }
.lines { margin-top: 21pt; }
.recrow { display: flex; gap: 15pt; margin-top: 12pt; }
.cond { width: 42%; }
.cond-lines { font-size: 7.5pt; line-height: 1.65; }
.exc { width: 58%; }
.writein { border-bottom: 0.75pt solid #DCDCDC; height: 15pt; }
.ckline { display: flex; gap: 5.25pt; align-items: center; margin-bottom: 5.25pt; }
.ckline .ck { flex-shrink: 0; }
.sig-dn { margin-top: 15pt; gap: 30pt; }
.sig-dn .sigline { margin-top: 21pt; }
.sig-dn .halfslot { flex-grow: 0.55; }
northmoor-shared.css alongside them — the set’s shared spine (type scale, tables, signature blocks, the accent).
Sample data (data.json)
Sample data (data.json)
data.json
{
"noteNumber": "DN-40118",
"copy": "1 of 3, consignee",
"deliveryDate": "09 September 2026",
"vehicle": "Erie Valley 118 · NY DOT 44712",
"driver": "C. Boudreau",
"reference": "PS-88214 · PO 44-7712",
"consignee": "Brightwater Foods LLC, Plant 2 — Receiving Dock 4, 3900 Harvard Road, Cleveland, OH 44105",
"consignor": "Northmoor Industrial Group, Inc., Shipping Dock 2, 2200 Lyell Avenue, Rochester, NY 14606",
"lines": [
{
"line": "01",
"description": "Skid frame, welded tube, 96 × 48 in, primed",
"quantity": 8,
"unit": "ea",
"package": "Crate 1",
"weight": "246 lb"
},
{
"line": "02",
"description": "Guard panel, perforated steel",
"quantity": 24,
"unit": "ea",
"package": "Crate 2",
"weight": "112 lb"
},
{
"line": "03",
"description": "Mounting bracket, machined",
"quantity": 32,
"unit": "ea",
"package": "Crate 3",
"weight": "44 lb"
},
{
"line": "04",
"description": "Fastener kit, stainless 316",
"quantity": 8,
"unit": "kit",
"package": "Crate 3",
"weight": "16 lb"
}
],
"totals": {
"pieces": 3,
"quantity": 72,
"weight": "418 lb"
},
"conditions": [
"Received in good order",
"Packaging damaged, contents checked",
"Shortage — noted below",
"Refused — reason below"
],
"signatureSlots": [
"Received by — signature",
"Print name and title",
"Date received",
"Time received"
]
}
MIT-licensed, free to copy — source on GitHub. Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.