Page 1 of 2
Page 2 of 2
data.json first; real photography drops into the placeholder slots at the same aspect. Caveats: the placeholders are bordered and captioned on the flat light ground — the design’s 45° hatch is a gradient, which the engine subset excludes — and the folios are the catalogue’s own (Page 4.1 / 4.2), carried by named pages instead of counter(page).
Engine features exercised: named page for per-page folio strings, running header on the continuation page, CSS grid product cards (2-up and 3-up), grouped-option table, continuation marker.
Render it:
npx @formepdf/html templates/product-catalog/index.html -o product-catalog.pdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Product catalog 2026–27, Section 4 — Utility skids — 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="page41">
<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">Product Catalog 2026–27</div>
</div>
</div>
<div class="addr" style="text-align: right">Section 4 — Fabricated skids<br>Effective 01 October 2026<br>Supersedes the 2025 edition</div>
</div>
<div class="hr2" style="margin-top: 15pt"></div>
<div class="dochead">
<div>
<div class="rowstart" style="margin-bottom: 9pt"><div class="tab">Section 4 · fabricated skids</div></div>
<h1 class="dtitle">Utility skids</h1>
</div>
<div style="text-align: right">
<div class="lbl" style="margin-bottom: 5.25pt">Pages</div>
<div class="refnum">4.1 – 4.2</div>
</div>
</div>
</header>
<div class="prose" style="margin-top: 15pt; max-width: 330.75pt"><p>Standard skids are built to the dimensions below and shipped primed. Any skid can be supplied in 304 or 316L stainless, powder coated to a specified colour, or fitted with the guard package; see the options table on page 4.2. Lead times assume standard finish and no first-article inspection.</p></div>
<div class="prodgrid">
<div>
<div class="imgph ph-lg"><span class="cap">product shot — skid frame SK-96<br>three-quarter view, plain ground</span></div>
<h2 class="prodname">SK-96 Standard utility skid</h2>
<div class="proddesc">96 × 48 in welded tube frame, four lifting points, adjustable feet. Rated 4,000 lb distributed load.</div>
<table class="t pricetable">
<tbody>
<tr><td>SK-96-P primed</td><td class="num flag">1,485.00</td></tr>
<tr><td>SK-96-S4 304 stainless</td><td class="num flag">2,340.00</td></tr>
<tr><td>SK-96-S6 316L stainless</td><td class="num flag">2,880.00</td></tr>
</tbody>
</table>
</div>
<div>
<div class="imgph ph-lg"><span class="cap">product shot — skid frame SK-120<br>with access platform fitted</span></div>
<h2 class="prodname">SK-120 Extended utility skid</h2>
<div class="proddesc">120 × 48 in frame with centre cross member. Takes the AP-48 access platform without modification.</div>
<table class="t pricetable">
<tbody>
<tr><td>SK-120-P primed</td><td class="num flag">1,910.00</td></tr>
<tr><td>SK-120-S4 304 stainless</td><td class="num flag">2,995.00</td></tr>
<tr><td>SK-120-S6 316L stainless</td><td class="num flag">3,640.00</td></tr>
</tbody>
</table>
</div>
</div>
<h2 class="sh">Dimensions and lead times</h2>
<table class="t">
<thead><tr><th scope="col" style="width: 60pt">Model</th><th scope="col" class="num" style="width: 55.5pt">Length</th><th scope="col" class="num" style="width: 55.5pt">Width</th><th scope="col" class="num" style="width: 55.5pt">Height</th><th scope="col" class="num" style="width: 63pt">Load rating</th><th scope="col" class="num" style="width: 52.5pt">Weight</th><th scope="col" class="num">Lead time</th></tr></thead>
<tbody>
<tr><td>SK-72</td><td class="num">72 in</td><td class="num">48 in</td><td class="num">24 in</td><td class="num">3,000 lb</td><td class="num">218 lb</td><td class="num">3 weeks</td></tr>
<tr><td>SK-96</td><td class="num">96 in</td><td class="num">48 in</td><td class="num">24 in</td><td class="num">4,000 lb</td><td class="num">246 lb</td><td class="num">3 weeks</td></tr>
<tr><td>SK-120</td><td class="num">120 in</td><td class="num">48 in</td><td class="num">24 in</td><td class="num">4,800 lb</td><td class="num">312 lb</td><td class="num">4 weeks</td></tr>
<tr><td>SK-144</td><td class="num">144 in</td><td class="num">60 in</td><td class="num">28 in</td><td class="num">6,000 lb</td><td class="num">404 lb</td><td class="num">5 weeks</td></tr>
</tbody>
</table>
<div class="cont">Continued on page 4.2 — platforms, guards and options</div>
<footer class="foot" style="margin-top: 15pt">
<div style="flex-grow: 1">Prices are list, effective 1 October 2026, and are subject to our conditions of sale. Distributor discounts apply per the current schedule.</div>
<div>4.1</div>
</footer>
</div>
<div class="p2">
<div class="prodgrid3">
<div>
<div class="imgph ph-sm"><span class="cap">product shot<br>AP-48 platform</span></div>
<h2 class="prodname prodname-sm">AP-48 Access platform</h2>
<div class="proddesc proddesc-sm">Galvanized grating, 48 in wide, with handrail and toe board. Bolts to any SK frame.</div>
<div class="prodprice flag">2,240.00</div>
</div>
<div>
<div class="imgph ph-sm"><span class="cap">product shot<br>GP-24 guard panel</span></div>
<h2 class="prodname prodname-sm">GP-24 Guard panel</h2>
<div class="proddesc proddesc-sm">Perforated steel, 24 in module, powder coat black. Quick-release fixings, no tools.</div>
<div class="prodprice flag">318.00</div>
</div>
<div>
<div class="imgph ph-sm"><span class="cap">product shot<br>CP-36 control panel</span></div>
<h2 class="prodname prodname-sm">CP-36 Control panel</h2>
<div class="proddesc proddesc-sm">NEMA 4X enclosure, 36 × 30 in, UL 508A labelled. VFDs to order.</div>
<div class="prodprice flag">4,860.00</div>
</div>
</div>
<h2 class="sh">Options and surcharges</h2>
<table class="t">
<thead><tr><th scope="col" style="width: 67.5pt">Code</th><th scope="col">Option</th><th scope="col" style="width: 97.5pt">Applies to</th><th scope="col" class="num" style="width: 82.5pt">Price or surcharge</th></tr></thead>
<tbody>
<tr class="ghead"><td colspan="4">Finish</td></tr>
<tr><td>OPT-PC</td><td>Powder coat, single colour to RAL, over primer</td><td>All SK models</td><td class="num">+ 12% of list</td></tr>
<tr><td>OPT-EP</td><td>Two-coat epoxy, food and pharma areas</td><td>All SK models</td><td class="num">+ 18% of list</td></tr>
<tr><td>OPT-BE</td><td>Bead blast and passivate, stainless only</td><td>S4 and S6 models</td><td class="num">+ 340.00</td></tr>
<tr class="ghead"><td colspan="4">Mechanical</td></tr>
<tr><td>OPT-CS</td><td>Castors, four, two braked, 800 lb each</td><td>SK-72 to SK-120</td><td class="num">+ 486.00</td></tr>
<tr><td>OPT-SM</td><td>Seismic anchor kit, four points, with calculations</td><td>All SK models</td><td class="num">+ 620.00</td></tr>
<tr><td>OPT-DP</td><td>Drip pan, welded, 2 in lip with drain boss</td><td>All SK models</td><td class="num">+ 745.00</td></tr>
<tr class="ghead"><td colspan="4">Documentation and inspection</td></tr>
<tr><td>OPT-FA</td><td>First-article inspection with dimensional report</td><td>Any line</td><td class="num">+ 380.00</td></tr>
<tr><td>OPT-MC</td><td>Material certificates, mill and heat traceability</td><td>Any line</td><td class="num">+ 95.00</td></tr>
<tr><td>OPT-WQ</td><td>Welder qualification records, ASME IX</td><td>Any line</td><td class="num">No charge</td></tr>
</tbody>
</table>
<div class="howto">
<div><div class="lbl" style="margin-bottom: 5.25pt">How to order</div>Quote the model code, the finish suffix and any option codes, in that order — for example <b>SK-96-S6 / OPT-DP / OPT-FA</b>. Purchase orders should reference this catalog edition. Quantities above twenty units are quoted individually.</div>
<div><div class="lbl" style="margin-bottom: 5.25pt">Contact</div>Estimating, (585) 274-0180 ext. 244 · estimating@northmoorgroup.com<br>Drawings in DWG and STEP formats on request. Site surveys within 200 miles of Rochester are free of charge.</div>
</div>
<footer class="foot" style="margin-top: 15pt">
<div style="flex-grow: 1">Northmoor Industrial Group, Inc. · 418 Ellingham Road, Suite 300, Rochester, NY 14604 · Section 4 of 9</div>
<div>4.2</div>
</footer>
</div>
</div>
</body>
</html>
/* product-catalog — section 4, two pages with image placeholders.
* Accent policy (catalogue): one solid accent tab and price emphasis.
* Counters follow the design's section folios (Page 4.1 / 4.2). */
@page {
size: Letter;
margin: 52.5pt 57pt 40.5pt;
@bottom-left {
content: "Northmoor product catalog 2026–27 · Section 4, options";
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
@bottom-right {
content: "Page 4.2";
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
@top-left {
content: "Northmoor catalog 2026–27";
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: "Section 4 — Utility skids";
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: "Platforms, guards and options";
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 sec41 {
@top-left { content: none }
@top-center { content: none }
@top-right { content: none }
@bottom-left {
content: "Northmoor product catalog 2026–27 · Section 4, utility skids";
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
@bottom-right {
content: "Page 4.1";
font-family: Helvetica, Arial, sans-serif;
font-size: 5.625pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8A857E;
}
}
.page41 { page: sec41 }
.sheet { position: relative; }
.atop { position: absolute; top: -52.5pt; left: -57pt; right: -57pt; height: 3pt; background-color: #7B2233; }
.prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22.5pt; margin-top: 18pt; }
.prodgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18pt; }
.ph-lg { height: 112.5pt; }
.ph-sm { height: 90pt; }
.prodname { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 8.25pt; line-height: 1.3; margin-top: 8.25pt; }
.prodname-sm { font-size: 7.875pt; margin-top: 6.75pt; }
.proddesc { font-size: 7.125pt; line-height: 1.65; color: #444444; margin-top: 3.75pt; }
.proddesc-sm { font-size: 6.75pt; line-height: 1.6; margin-top: 3pt; }
.prodprice { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 7.5pt; line-height: 1; margin-top: 6pt; }
.pricetable { font-size: 6.75pt; margin-top: 7.5pt; }
.small-t { font-size: 6.75pt; }
.p2 { break-before: page; }
.howto { display: flex; gap: 22.5pt; margin-top: 19.5pt; }
.howto > div { width: 50%; font-size: 7.125pt; line-height: 1.75; }
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
{
"section": "4 — Fabricated skids",
"pages": "4.1 – 4.2",
"effective": "01 October 2026",
"products": [
{
"code": "SK-96",
"name": "Standard utility skid",
"description": "96 × 48 in welded tube frame, four lifting points, adjustable feet. Rated 4,000 lb distributed load.",
"prices": [
[
"SK-96-P primed",
"1,485.00"
],
[
"SK-96-S4 304 stainless",
"2,340.00"
],
[
"SK-96-S6 316L stainless",
"2,880.00"
]
],
"imagePlaceholder": "product shot — skid frame SK-96, three-quarter view, plain ground"
},
{
"code": "SK-120",
"name": "Extended utility skid",
"description": "120 × 48 in frame with centre cross member. Takes the AP-48 access platform without modification.",
"prices": [
[
"SK-120-P primed",
"1,910.00"
],
[
"SK-120-S4 304 stainless",
"2,995.00"
],
[
"SK-120-S6 316L stainless",
"3,640.00"
]
],
"imagePlaceholder": "product shot — skid frame SK-120, with access platform fitted"
}
],
"accessories": [
{
"code": "AP-48",
"name": "Access platform",
"price": "2,240.00"
},
{
"code": "GP-24",
"name": "Guard panel",
"price": "318.00"
},
{
"code": "CP-36",
"name": "Control panel",
"price": "4,860.00"
}
],
"dimensions": [
[
"SK-72",
"72 in",
"48 in",
"24 in",
"3,000 lb",
"218 lb",
"3 weeks"
],
[
"SK-96",
"96 in",
"48 in",
"24 in",
"4,000 lb",
"246 lb",
"3 weeks"
],
[
"SK-120",
"120 in",
"48 in",
"24 in",
"4,800 lb",
"312 lb",
"4 weeks"
],
[
"SK-144",
"144 in",
"60 in",
"28 in",
"6,000 lb",
"404 lb",
"5 weeks"
]
],
"optionGroups": [
{
"group": "Finish",
"options": [
[
"OPT-PC",
"Powder coat, single colour to RAL, over primer",
"All SK models",
"+ 12% of list"
],
[
"OPT-EP",
"Two-coat epoxy, food and pharma areas",
"All SK models",
"+ 18% of list"
],
[
"OPT-BE",
"Bead blast and passivate, stainless only",
"S4 and S6 models",
"+ 340.00"
]
]
},
{
"group": "Mechanical",
"options": [
[
"OPT-CS",
"Castors, four, two braked, 800 lb each",
"SK-72 to SK-120",
"+ 486.00"
],
[
"OPT-SM",
"Seismic anchor kit, four points, with calculations",
"All SK models",
"+ 620.00"
],
[
"OPT-DP",
"Drip pan, welded, 2 in lip with drain boss",
"All SK models",
"+ 745.00"
]
]
},
{
"group": "Documentation and inspection",
"options": [
[
"OPT-FA",
"First-article inspection with dimensional report",
"Any line",
"+ 380.00"
],
[
"OPT-MC",
"Material certificates, mill and heat traceability",
"Any line",
"+ 95.00"
],
[
"OPT-WQ",
"Welder qualification records, ASME IX",
"Any line",
"No charge"
]
]
}
]
}
MIT-licensed, free to copy — source on GitHub. Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.