Shipping Label

The 4 × 6 in thermal shipping label: its own page size, a die-cut ink border, and pure black throughout — the one document in the set with no accent, because thermal printers have no colour to give. Change the carrier, ship-to and pro-number fields in data.json first. Caveat: the barcode is a bordered placeholder captioned with the pro number — the engine’s Code 128 support is not reachable from the HTML input path, and a fake-real barcode would be worse than an honest placeholder; generate a real symbol at build time if you wire this to a carrier. No page counter, per the design (a die-cut label is not a paged document). Engine features exercised: custom @page size (288 × 432pt), zero-margin bordered frame, flex fact rows, footer push. Render it:

npx @formepdf/html templates/shipping-label/index.html -o shipping-label.pdf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shipping label — Pro 7742-118-04 — Northmoor Industrial Group</title>
<link rel="stylesheet" href="../northmoor-shared.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="labelframe">

<header class="lhead">
  <div class="mast-left" style="gap: 6pt">
    <div class="mark lmark" style="background-color: #111111">N</div>
    <div>
      <h1 class="wm lwm" style="margin: 0">Northmoor</h1>
      <div class="sub lsub" style="color: #111111">2200 Lyell Ave, Rochester NY 14606</div>
    </div>
  </div>
  <div class="lmode">Ground<br>Freight prepaid</div>
</header>

<div class="lrow">
  <div class="lcol"><div class="lbl llbl">From</div><div class="lval">Northmoor Industrial Group<br>Shipping Dock 2<br>2200 Lyell Avenue<br>Rochester, NY 14606<br>(585) 274-0180</div></div>
  <div class="lcol"><div class="lbl llbl">Carrier</div><div class="lval">Erie Valley Freight<br>Pro 7742-118-04<br>Service: LTL, 2 day<br>Ship date 07 Sep 2026</div></div>
</div>

<div class="shipto">
  <div class="lbl llbl">Ship to</div>
  <div class="shipto-name">Brightwater Foods LLC<br>Plant 2 — Receiving Dock 4<br>3900 Harvard Road<br>Cleveland, OH 44105</div>
  <div class="shipto-attn">Attn. Receiving supervisor · (216) 441-2200 · Hours 06:00–14:00</div>
</div>

<div class="factrow">
  <div class="f1"><div class="lbl llbl">Pieces</div><div class="fact">3 of 3</div></div>
  <div class="f2"><div class="lbl llbl">Weight</div><div class="fact">418 lb</div></div>
  <div class="f3"><div class="lbl llbl">Dimensions</div><div class="fact">48×40×36 in</div></div>
  <div class="f4"><div class="lbl llbl">Class</div><div class="fact">NMFC 70</div></div>
</div>

<div class="refrow">
  <div class="lcol3"><div class="lbl llbl">Purchase order</div>44-7712</div>
  <div class="lcol3"><div class="lbl llbl">Packing slip</div>PS-88214</div>
  <div class="lcol3"><div class="lbl llbl">Release</div>R-07</div>
</div>

<div class="pagefill-spacer"></div>
<footer class="barwrap">
  <div class="barph"><span>Code 128 — pro 7742-118-04</span></div>
  <div class="pro">7742 1180 4 0003</div>
  <div class="lfoot"><div>Do not double stack</div><div>Label 3 of 3</div></div>
</footer>

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

/* shipping-label — 4 × 6 in thermal label. NO accent anywhere: pure
 * black, per the design's accent policy (it comes off a thermal
 * printer). The die-cut edge is a full-size 0.75pt ink border. */
@page {
  size: 288pt 432pt; /* 4 × 6 in */
  margin: 0;
}
.labelframe {
  height: 430.5pt; /* 432 minus the border × 2 */
  border: 0.75pt solid #111111;
  padding: 12pt; /* 16px */
  display: flex;
  flex-direction: column;
  font-size: 6.75pt; /* 9px label base */
  line-height: 1.4;
}
.lhead { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 0.75pt solid #111111; padding-bottom: 6.75pt; }
.lmark { width: 19.5pt; height: 19.5pt; font-size: 8.25pt; line-height: 19.5pt; }
.lwm { font-size: 6.75pt; }
.lsub { font-size: 4.5pt; margin-top: 1.5pt; }
.lmode { text-align: right; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 5.25pt; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
.lrow { display: flex; gap: 7.5pt; border-bottom: 0.75pt solid #111111; padding: 6.75pt 0; }
.lcol { width: 50%; }
.llbl { font-size: 4.875pt; }
.lval { font-size: 6pt; line-height: 1.45; margin-top: 2.25pt; }
.shipto { padding: 8.25pt 0 6.75pt; border-bottom: 1.5pt solid #111111; }
.shipto-name { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12pt; line-height: 1.28; margin-top: 3.75pt; }
.shipto-attn { font-size: 6pt; margin-top: 4.5pt; color: #444444; }
.factrow { display: flex; gap: 7.5pt; padding: 6.75pt 0; border-bottom: 0.75pt solid #111111; }
.fact { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 9.75pt; line-height: 1.2; margin-top: 2.25pt; }
.f1 { width: 22%; } .f2 { width: 22%; } .f3 { width: 31%; } .f4 { width: 25%; }
.refrow { display: flex; gap: 7.5pt; padding: 6.75pt 0; border-bottom: 0.75pt solid #111111; font-size: 6pt; line-height: 1.5; }
.refrow .lcol3 { width: 33.3%; }
.barwrap { padding-top: 7.5pt; }
/* Code 128 placeholder: the engine's barcode support is not reachable
 * from the HTML path — a bordered box stands in; see README. */
.barph {
  height: 27pt;
  border: 0.75pt solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.barph span { font-family: Menlo, monospace; font-size: 5.25pt; letter-spacing: 0.1em; color: #444444; text-transform: uppercase; }
.pro { font-family: Menlo, monospace; font-weight: 700; font-size: 8.25pt; line-height: 1; letter-spacing: 0.14em; text-align: center; margin-top: 4.5pt; }
.lfoot { display: flex; justify-content: space-between; font-size: 4.875pt; letter-spacing: 0.1em; text-transform: uppercase; color: #444444; margin-top: 6pt; border-top: 0.75pt solid #111111; padding-top: 3.75pt; }

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

{
  "carrier": {
    "name": "Erie Valley Freight",
    "pro": "7742-118-04",
    "service": "LTL, 2 day",
    "shipDate": "07 Sep 2026",
    "mode": "Ground",
    "terms": "Freight prepaid"
  },
  "from": {
    "name": "Northmoor Industrial Group",
    "dock": "Shipping Dock 2",
    "address": "2200 Lyell Avenue, Rochester, NY 14606",
    "phone": "(585) 274-0180"
  },
  "shipTo": {
    "name": "Brightwater Foods LLC",
    "location": "Plant 2 — Receiving Dock 4",
    "address": "3900 Harvard Road, Cleveland, OH 44105",
    "attn": "Receiving supervisor",
    "phone": "(216) 441-2200",
    "hours": "06:00–14:00"
  },
  "pieces": "3 of 3",
  "weight": "418 lb",
  "dimensions": "48×40×36 in",
  "class": "NMFC 70",
  "purchaseOrder": "44-7712",
  "packingSlip": "PS-88214",
  "release": "R-07",
  "barcodeValue": "7742 1180 4 0003",
  "labelNumber": "3 of 3",
  "handling": "Do not double stack"
}

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

Shipping Label