Correspondence and reporting / A4
Multi-page PDF report HTML template
A structured report with a full-bleed cover, a contents page, automatically numbered sections and figures, and body pages that flow.
When this document is the right one
A periodic review, an analysis or anything long enough that the reader navigates it rather than reading it straight through. It is the document type where paged CSS earns its keep, because almost every feature is about pages.
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.
- A cover page with its own page master and no margins, so the background reaches the paper edge.
- A contents page, which for a generated report means the numbers are produced by whatever generated the content rather than typed.
- Section and figure numbering from CSS counters, so inserting a figure renumbers every reference to a later one.
- Headings that carry break-after: avoid, since a heading at the foot of a page is the most visible sign of an unedited document.
- Tables with repeating headers and figures that never split, because both are meaningless when broken across a page.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quarterly operations review, Q1 2026</title>
<style>
/* Three page masters. The cover has no running header, the contents page
restarts nothing, and body pages carry the header and a page number. */
@page { size: A4; margin: 24mm 20mm 22mm; }
@page :first { margin: 0; }
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.55 "Helvetica Neue", Arial, sans-serif; color: #17202a;
counter-reset: section figure; }
.cover { height: 297mm; padding: 40mm 25mm 25mm; display: flex; flex-direction: column;
background: #17202a; color: #fff; print-color-adjust: exact;
-webkit-print-color-adjust: exact; break-after: page; }
.cover .eyebrow { font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase;
color: #8fa3b8; }
.cover h1 { font-size: 34pt; line-height: 1.1; margin: 6mm 0 0; font-weight: 300; }
.cover .sub { font-size: 13pt; color: #b9c7d6; margin-top: 4mm; }
.cover .meta { margin-top: auto; font-size: 9.5pt; color: #8fa3b8;
border-top: 1px solid #3a4a5c; padding-top: 5mm; }
.toc { break-after: page; }
.toc h2 { font-size: 15pt; margin: 0 0 6mm; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; justify-content: space-between;
border-bottom: 1px dotted #c5cfd9; padding: 2.5mm 0; }
.toc li::before { content: counter(toc) ". "; margin-right: 2mm; color: #6b7c8f; }
.toc .t { flex: 1; }
h2.sec { font-size: 15pt; margin: 10mm 0 3mm; padding-bottom: 2mm;
border-bottom: 2px solid #17202a; break-after: avoid; }
h2.sec::before { counter-increment: section; content: counter(section) ". "; color: #6b7c8f; }
h3 { font-size: 11pt; margin: 6mm 0 2mm; break-after: avoid; }
p { margin: 0 0 3.5mm; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; margin: 5mm 0;
break-inside: avoid; }
.kpis div { border: 1px solid #d5dde5; padding: 4mm; }
.kpis .k { font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.06em;
color: #6b7c8f; }
.kpis .v { font-size: 17pt; font-weight: 700; margin-top: 1.5mm;
font-variant-numeric: tabular-nums; }
.kpis .d { font-size: 8pt; color: #6b7c8f; margin-top: 1mm; }
table { width: 100%; border-collapse: collapse; margin: 4mm 0; }
thead { display: table-header-group; }
th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.05em;
color: #6b7c8f; border-bottom: 1.5px solid #17202a; padding-bottom: 2mm; }
td { padding: 2.2mm 0; border-bottom: 1px solid #eef2f5; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
figure { margin: 5mm 0; break-inside: avoid; }
figure .plot { height: 45mm; border: 1px solid #d5dde5; background: #f7f9fb; }
figcaption { font-size: 8.5pt; color: #6b7c8f; margin-top: 2mm; }
figcaption::before { counter-increment: figure; content: "Figure " counter(figure) ". ";
font-weight: 700; color: #17202a; }
blockquote { margin: 5mm 0; border-left: 3px solid #17202a; padding: 1mm 0 1mm 5mm;
font-size: 10.5pt; break-inside: avoid; }
</style>
</head>
<body>
<div class="cover">
<div class="eyebrow">Kilnworks Studio</div>
<h1>Quarterly<br>operations review</h1>
<div class="sub">Q1 2026, January to March</div>
<div class="meta">
Prepared by E. Prentice and A. Boland · 14 May 2026<br>
Circulation: board and studio leads. Not for external distribution.
</div>
</div>
<nav class="toc">
<h2>Contents</h2>
<ol>
<li><span class="t">Summary</span><span>3</span></li>
<li><span class="t">Production and throughput</span><span>3</span></li>
<li><span class="t">Quality and loss</span><span>4</span></li>
<li><span class="t">Commercial</span><span>5</span></li>
<li><span class="t">Risks and decisions required</span><span>6</span></li>
</ol>
</nav>
<h2 class="sec">Summary</h2>
<p>
The quarter closed ahead of plan on output and behind on margin. Throughput rose
eleven per cent against Q4, driven almost entirely by the second kiln coming into
routine use in February. Margin fell because the loss rate on the new reduction
glaze has not yet settled, and every lost piece is a piece that was already paid
for in clay, labour and firing.
</p>
<div class="kpis">
<div><div class="k">Pieces fired</div><div class="v">4,180</div><div class="d">+11% vs Q4</div></div>
<div><div class="k">Loss rate</div><div class="v">9.4%</div><div class="d">+3.1pp vs Q4</div></div>
<div><div class="k">Kiln utilisation</div><div class="v">71%</div><div class="d">two kilns from Feb</div></div>
<div><div class="k">Gross margin</div><div class="v">38.2%</div><div class="d">-4.4pp vs Q4</div></div>
</div>
<h2 class="sec">Production and throughput</h2>
<p>
Kiln 2 was commissioned on 04 February and reached routine use from the week of
17 February. The step in the chart below is that date rather than any change in
demand or in staffing.
</p>
<figure>
<div class="plot"></div>
<figcaption>Pieces fired per week, Q4 2025 to Q1 2026. The step at week 7 is the
second kiln entering service.</figcaption>
</figure>
<table>
<thead>
<tr><th>Month</th><th class="num">Firings</th><th class="num">Pieces</th>
<th class="num">Pieces per firing</th><th class="num">Utilisation</th></tr>
</thead>
<tbody>
<tr><td>January</td><td class="num">18</td><td class="num">1,152</td>
<td class="num">64</td><td class="num">58%</td></tr>
<tr><td>February</td><td class="num">24</td><td class="num">1,464</td>
<td class="num">61</td><td class="num">70%</td></tr>
<tr><td>March</td><td class="num">27</td><td class="num">1,564</td>
<td class="num">58</td><td class="num">84%</td></tr>
</tbody>
</table>
<h2 class="sec">Quality and loss</h2>
<p>
Loss rose from 6.3 per cent to 9.4 per cent. Two thirds of the increase is
crazing on the new reduction glaze at the cooler end of kiln 2, which is a
commissioning problem rather than a formulation one: the same glaze in kiln 1
lost 5.8 per cent over the same period.
</p>
<blockquote>
The cost of the loss rate this quarter was approximately GBP 14,200 in finished
value, against a projected GBP 4,000 saving from the additional capacity.
</blockquote>
<h2 class="sec">Risks and decisions required</h2>
<h3>Decision 1: kiln 2 firing schedule</h3>
<p>
We recommend a two-week programme of controlled cooling trials on kiln 2 before
the Ravenshill production run begins on 08 June. This costs roughly nine days of
capacity and, on the numbers above, pays for itself inside one quarter.
</p>
<h3>Decision 2: pricing on hand-finished lines</h3>
<p>
The rim detail line is quoted at GBP 2.20 per piece and is costing GBP 2.90 in
labour at the current loss rate. Either the price moves or the line is withdrawn
from the trade list at the Autumn revision.
</p>
</body>
</html>The layout decision worth understanding
The cover uses @page :first with zero margin and a full-height element with print-color-adjust: exact, which is what makes a dark cover reach the paper edge. Body pages use the normal margin. Two page masters in one document is the single most useful thing paged CSS offers and it is what most report templates never use.
The mistake people make adapting it
Building the contents page by hand. Page numbers in a generated report move whenever the content does, and a contents page listing page five for something on page seven is worse than no contents page, because the reader trusts it once.
Rendering it
The page box is declared in the template's own CSS as A4, so the size travels with the markup rather than living in the code that calls the renderer. A4 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": "A4" }
}' \
--output report.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 multi-page report is a A4 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.
Business letter HTML template with letterhead
A formal letter with a letterhead on the first page only and a recipient address positioned for a window envelope.
Meeting minutes HTML template
Numbered agenda items with decisions pulled out of the narrative, and an actions table with an owner and a date on every row.
School report card HTML template
Subject rows with an attainment grade, an effort grade and a teacher comment, plus an attendance summary and a grade key on the page.
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.
Packing slip HTML template
The document that goes in the box: what was ordered, what was actually shipped, and no prices at all.
Every template
The full set, grouped by what part of a business produces the document.
A4 page size for PDF generation
A4 is the default page for business documents everywhere except North America, and the default this API uses when no format is given.
Paste the template into the playground and get the PDF back. No signup, no key.