> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formepdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Catalog

> Section 4 of the product catalogue, two pages: product cards with captioned image placeholders and accent-emphasised prices, a dimensions table, and grouped options with surcharges.

<Frame caption="Page 1 of 2">
  <img src="https://mintcdn.com/dataferry/I-nCXjDKaxTBieX4/images/templates/product-catalog/page-1.webp?fit=max&auto=format&n=I-nCXjDKaxTBieX4&q=85&s=e8078d822af0e1d05aa682dcf7099d46" alt="Product Catalog, page 1" width="1100" height="1424" data-path="images/templates/product-catalog/page-1.webp" />
</Frame>

<Frame caption="Page 2 of 2">
  <img src="https://mintcdn.com/dataferry/I-nCXjDKaxTBieX4/images/templates/product-catalog/page-2.webp?fit=max&auto=format&n=I-nCXjDKaxTBieX4&q=85&s=343023a09ae3442f52b98310372be262" alt="Product Catalog, page 2" width="1100" height="1424" data-path="images/templates/product-catalog/page-2.webp" />
</Frame>

Section 4 of the product catalogue, two pages: product cards with captioned image placeholders and accent-emphasised prices, a dimensions table, and grouped options with surcharges. Change the products, prices and options in `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:

```bash theme={null}
npx @formepdf/html templates/product-catalog/index.html -o product-catalog.pdf
```

<CodeGroup>
  ```html index.html theme={null}
  <!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 &nbsp;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 &nbsp;primed</td><td class="num flag">1,485.00</td></tr>
          <tr><td>SK-96-S4 &nbsp;304 stainless</td><td class="num flag">2,340.00</td></tr>
          <tr><td>SK-96-S6 &nbsp;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 &nbsp;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 &nbsp;primed</td><td class="num flag">1,910.00</td></tr>
          <tr><td>SK-120-S4 &nbsp;304 stainless</td><td class="num flag">2,995.00</td></tr>
          <tr><td>SK-120-S6 &nbsp;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 &nbsp;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 &nbsp;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 &nbsp;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>
  ```

  ```css style.css theme={null}
  /* 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; }
  ```
</CodeGroup>

Both files assume [`northmoor-shared.css`](https://github.com/formepdf/forme/blob/main/templates/northmoor-shared.css) alongside them — the set's shared spine (type scale, tables, signature blocks, the accent).

<Accordion title="Sample data (data.json)">
  ```json data.json theme={null}
  {
    "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"
          ]
        ]
      }
    ]
  }
  ```
</Accordion>

***

MIT-licensed, free to copy — [source on GitHub](https://github.com/formepdf/forme/tree/main/templates/product-catalog). Passes PDF/UA-1 validation (veraPDF) in CI; validation is a floor, not a certification.
