Purchase Order — rendered output
npx @formepdf/html templates/purchase-order/index.html -o purchase-order.pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Purchase order PO-77412 — 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">Purchasing Department</div>
</div>
</div>
<div class="addr" style="text-align: right">418 Ellingham Road, Suite 300<br>Rochester, NY 14604<br>(585) 274-0180<br>purchasing@northmoorgroup.com</div>
</div>
<div class="hr2 mast-divider"></div>
<div class="dochead">
<div>
<div class="lbl lbl-accent" style="margin-bottom: 7.5pt">Purchasing · quote this number on all documents</div>
<h1 class="dtitle">Purchase order</h1>
</div>
<div style="text-align: right">
<div class="lbl" style="margin-bottom: 5.25pt">Order number</div>
<div class="refnum">PO-77412</div>
</div>
</div>
</header>
<div class="meta meta-doc">
<div><div class="lbl">Supplier</div>Tanaka Precision Parts, Inc.<br>Attn. Order Desk<br>860 Industrial Drive<br>Elkhart, IN 46514</div>
<div><div class="lbl">Deliver to</div>Northmoor Industrial Group<br>Fabrication Plant — Dock 4<br>2200 Lyell Avenue<br>Rochester, NY 14606</div>
<div><div class="lbl">Order date</div>07 September 2026<div class="lbl meta-gap">Required by</div>09 October 2026</div>
<div><div class="lbl">Terms</div>Net 45 · FOB destination<div class="lbl meta-gap">Buyer</div>K. Alvarez, ext. 331</div>
</div>
<table class="t items">
<thead>
<tr>
<th scope="col" style="width: 33pt">Line</th>
<th scope="col">Description and specification</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: 61.5pt">Price</th>
<th scope="col" class="num" style="width: 69pt">Extended</th>
</tr>
</thead>
<tbody>
<tr><td>01</td><td>Bearing housing, cast iron, machined to drawing 4471-B rev C<br><span class="dim">Material certificate required · first article on line 01</span></td><td class="num">60</td><td>ea</td><td class="num">84.00</td><td class="num">5,040.00</td></tr>
<tr><td>02</td><td>Shaft, 1045 cold drawn steel, 2 in dia × 36 in, centres both ends</td><td class="num">40</td><td>ea</td><td class="num">126.50</td><td class="num">5,060.00</td></tr>
<tr><td>03</td><td>Key stock, 1/2 in square, 12 in lengths, zinc plated</td><td class="num">200</td><td>ea</td><td class="num">4.20</td><td class="num">840.00</td></tr>
</tbody>
</table>
<table class="tt">
<tbody>
<tr><td>Goods</td><td class="num">10,940.00</td></tr>
<tr><td>Freight — prepaid by supplier, FOB destination</td><td class="num">0.00</td></tr>
<tr class="total"><td>Order total, not to be exceeded</td><td class="num">10,940.00</td></tr>
</tbody>
</table>
<div class="twocol">
<div class="condcol">
<h2 class="lbl" style="margin: 0 0 5.25pt">Conditions of purchase</h2>
<div class="conds">1 Acceptance of this order constitutes acceptance of these conditions.<br>2 Quantities are firm; over-shipment above 2% will be returned at supplier expense.<br>3 Packing slip and certificate of conformity must accompany each shipment.<br>4 Invoices without this order number will be returned unpaid.<br>5 Northmoor may inspect at source on five business days' notice.</div>
</div>
<div class="codecol">
<h2 class="lbl" style="margin: 0 0 5.25pt">Internal coding</h2>
<table class="t mini">
<tbody>
<tr><th scope="row" class="rlab">Cost centre</th><td class="num">4200 · Fabrication</td></tr>
<tr><th scope="row" class="rlab">GL account</th><td class="num">5110 · Raw material</td></tr>
<tr><th scope="row" class="rlab">Project</th><td class="num">2026-CS-04</td></tr>
<tr><th scope="row" class="rlab">Requisition</th><td class="num">REQ-20918</td></tr>
</tbody>
</table>
</div>
</div>
<div class="pagefill-spacer"></div>
<div class="sigrow">
<div class="sigcell lbl" style="flex-grow: 1.4">Authorised — K. Alvarez, Purchasing Manager</div>
<div class="sigcell lbl" style="flex-grow: 1">Supplier acknowledgement</div>
<div class="sigcell lbl" style="flex-grow: 0.7">Date</div>
</div>
<footer class="foot foot-after-sig">
<div style="flex-grow: 1"><div class="lbl">Acknowledgement</div>Return a signed copy within five business days confirming price and delivery date.</div>
<div style="flex-grow: 1"><div class="lbl">Invoicing</div>Email a single invoice per shipment to ap@northmoorgroup.com quoting PO-77412 and the packing slip number.</div>
</footer>
</div>
</div>
</body>
</html>
/* purchase-order — 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: "Purchase order PO-77412 · 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.3fr 1.3fr 1fr 1fr; }
.items { margin-top: 22.5pt; }
.twocol { display: flex; gap: 27pt; margin-top: 24pt; } /* 36px / 32px */
.conds { font-size: 7.125pt; line-height: 1.8; }
.foot-after-sig { margin-top: 16.5pt; }
/* Equal/ratio split columns: explicit widths (flex basis is not in
* the subset; grow alone leaves intrinsic-width columns). */
.twocol > div.condcol { width: 53%; }
.twocol > div.codecol { width: 40%; }
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
{
"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": "purchasing@northmoorgroup.com",
"department": "Purchasing Department"
},
"document": {
"type": "purchase-order",
"number": "PO-77412",
"orderDate": "07 September 2026",
"requiredBy": "09 October 2026",
"terms": "Net 45 · FOB destination",
"buyer": "K. Alvarez, ext. 331"
},
"supplier": {
"name": "Tanaka Precision Parts, Inc.",
"lines": [
"Attn. Order Desk",
"860 Industrial Drive",
"Elkhart, IN 46514"
]
},
"deliverTo": {
"name": "Northmoor Industrial Group",
"lines": [
"Fabrication Plant — Dock 4",
"2200 Lyell Avenue",
"Rochester, NY 14606"
]
},
"items": [
{
"line": "01",
"description": "Bearing housing, cast iron, machined to drawing 4471-B rev C",
"note": "Material certificate required · first article on line 01",
"qty": 60,
"unit": "ea",
"price": 84.0,
"extended": 5040.0
},
{
"line": "02",
"description": "Shaft, 1045 cold drawn steel, 2 in dia × 36 in, centres both ends",
"qty": 40,
"unit": "ea",
"price": 126.5,
"extended": 5060.0
},
{
"line": "03",
"description": "Key stock, 1/2 in square, 12 in lengths, zinc plated",
"qty": 200,
"unit": "ea",
"price": 4.2,
"extended": 840.0
}
],
"totals": {
"goods": 10940.0,
"freight": 0.0,
"orderTotal": 10940.0
},
"coding": {
"costCentre": "4200 · Fabrication",
"glAccount": "5110 · Raw material",
"project": "2026-CS-04",
"requisition": "REQ-20918"
}
}
MIT-licensed, free to copy — source on GitHub. Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.