Fulfilment / A5
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
When this document is the right one
An order is picked and packed. The reader is the person opening the carton, and their only question is whether what is in the box matches what they expected.
Why each part is there
The fields are visible in the markup. What is not visible is why they are present, which is the part that gets removed first when someone adapts a template for their own use.
- No prices anywhere. The box may be a gift, a dropship, or going to someone who paid a different price from the one on your system.
- Ordered quantity next to shipped quantity, as two columns. A single quantity column cannot express a short shipment.
- Short-shipped lines flagged visibly with what happens next, because the alternative is the customer counting and then emailing.
- A tick column, since this document is also the picker's check sheet before it becomes the customer's.
- Carrier and tracking, so the recipient of a split shipment knows this is one of several.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A5 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Packing slip, order ORD-99031</title>
<style>
@page { size: A5; margin: 10mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9pt/1.4 Arial, sans-serif; color: #000; }
header { display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid #000; padding-bottom: 4mm; }
h1 { margin: 0; font-size: 13pt; text-transform: uppercase; letter-spacing: 0.06em; }
.brand { font-weight: 700; font-size: 11pt; }
/* No prices anywhere. A packing slip goes in the box, and the box may be a
gift, a dropship, or going to a customer who paid a different price. */
.no-prices { font-size: 7.5pt; color: #555; margin-top: 1mm; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 5mm 0; }
.meta h2 { margin: 0 0 1.5mm; font-size: 7.5pt; text-transform: uppercase;
letter-spacing: 0.07em; color: #555; }
address { font-style: normal; }
table { width: 100%; border-collapse: collapse; margin-top: 4mm; }
thead { display: table-header-group; }
th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1.5px solid #000; padding-bottom: 1.5mm; }
td { padding: 2mm 0; border-bottom: 1px solid #e0e0e0; vertical-align: top; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A short-shipped line has to be visible, not silently omitted, or the
customer opens the box and counts. */
tr.short td { background: #fff4e5; }
tr.short .flag { display: block; font-size: 7.5pt; color: #8a5300; margin-top: 0.8mm; }
.checkbox { display: inline-block; width: 3.5mm; height: 3.5mm; border: 1px solid #000;
vertical-align: -0.5mm; }
footer { margin-top: 6mm; border-top: 1px solid #e0e0e0; padding-top: 3mm;
font-size: 8pt; display: grid; grid-template-columns: 1fr auto; gap: 5mm;
break-inside: avoid; }
.packer { text-align: right; }
</style>
</head>
<body>
<header>
<div>
<div class="brand">Fennel & Rye</div>
<div class="no-prices">Prices are not shown on this document</div>
</div>
<h1>Packing slip</h1>
</header>
<section class="meta">
<div>
<h2>Deliver to</h2>
<address><strong>H. Ashworth</strong><br>
41 Sylvan Road<br>Exeter EX4 6EW<br>United Kingdom</address>
</div>
<div>
<h2>Order</h2>
ORD-99031<br>
Placed 12 May 2026<br>
Packed 13 May 2026<br>
Carrier: Evri, 1 of 1<br>
Tracking H00448812203
</div>
</section>
<table>
<thead>
<tr><th></th><th>Item</th><th>SKU</th>
<th class="num">Ordered</th><th class="num">Shipped</th></tr>
</thead>
<tbody>
<tr>
<td><span class="checkbox"></span></td>
<td>Cold brew concentrate, 1L</td><td>FR-CB-1000</td>
<td class="num">2</td><td class="num">2</td>
</tr>
<tr>
<td><span class="checkbox"></span></td>
<td>House blend beans, 500g, whole</td><td>FR-HB-500</td>
<td class="num">3</td><td class="num">3</td>
</tr>
<tr class="short">
<td><span class="checkbox"></span></td>
<td>Ceramic pour-over, matte white
<span class="flag">Short shipped. 1 to follow, expected 20 May, no further charge.</span></td>
<td>FR-PO-01</td>
<td class="num">2</td><td class="num">1</td>
</tr>
</tbody>
</table>
<footer>
<div>
Returns within 30 days, unopened, using the label at
fennelandrye.example/returns. Quote ORD-99031.
</div>
<div class="packer">
Packed by <strong>SW</strong><br>
Checked by <strong>MR</strong>
</div>
</footer>
</body>
</html>The layout decision worth understanding
Set on A5, because that is what fits in a document wallet on the outside of a carton and because the content genuinely is short. The short-shipped row gets a tinted background: on a monochrome laser it still reads as a shaded row, which is enough to draw the eye.
The mistake people make adapting it
Omitting short-shipped lines entirely rather than showing them with a zero. The customer counts the box, finds an item missing, and cannot tell whether it was forgotten, cancelled or is following. Showing the line and its status turns a support ticket into a non-event.
Rendering it
The page box is declared in the template's own CSS as A5, so the size travels with the markup rather than living in the code that calls the renderer. A5 is also one of the six named formats the API accepts, so it can be passed in the request options instead if that suits your setup better.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "format": "A5" }
}' \
--output packing-slip.pdfFrequently asked
Can I use this template commercially?
Yes. Copy it, change it, ship it. It is sample markup written to be taken, and the sample data in it is invented, so replace the names and the numbers before anyone sees it.
Why is the page size in the CSS rather than in the API call?
Because a packing slip is a A5 document, and that is a property of the document rather than of the code that renders it. Declaring it in the page box means the size cannot be lost between the template and the call, which is the usual way a document ends up on the wrong paper.
Will it look the same in every renderer?
The layout will, because it uses ordinary CSS. The page break behaviour will not: break-inside and break-after are implemented differently by browser engines and by dedicated print engines, and some of the paged media specification is not implemented in browser renders at all. That difference is documented per property in the paged CSS reference.
Other templates
Documents from the same part of a business, and one from each of the other groups.
4x6 shipping label HTML template
A 4 by 6 inch thermal label with a service band, a large delivery address, a routing code and a barcode with real quiet zones.
Returns form HTML template
The form that goes in the box for the customer to send back: numbered steps, a table to fill in, coded reasons and a choice of outcome.
Goods received note HTML template
The buyer's record of what actually arrived: ordered against delivered against accepted, with every discrepancy explained and signed for.
21-per-sheet address label HTML template
Twenty-one addresses in a fixed 3 by 7 grid on A4, with absolute row heights so the print cannot drift out of the die cuts.
HTML invoice template with CSS
The standard commercial invoice: a demand for payment with line items, a tax figure, and terms that say when the money is due.
Payment receipt HTML template
Proof that a payment was made: the amount, the payment reference, the method, and what it was for.
Quotation HTML template with CSS
A priced proposal with a validity date, a scope, optional items kept out of the headline total, and somewhere to sign.
Every template
The full set, grouped by what part of a business produces the document.
A5 page size for PDF generation
A5 is half an A4 sheet, and the right size for a document that is short enough that A4 looks empty.
Paste the template into the playground and get the PDF back. No signup, no key.