Correspondence and reporting / A4
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.
When this document is the right one
Something needs to be said formally and on paper: a notice, a substantive response, anything that will be filed. The physical envelope is part of the requirement, which is what makes the address position load-bearing.
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 letterhead on the first page only, achieved with a separate first-page margin, because a repeated letterhead on page three looks like a template failure.
- The recipient address positioned 20mm from the left and 45mm from the top, which is where a standard DL window shows it after two folds.
- A reference line, since a filed letter is retrieved by reference rather than by date.
- A subject line that says the substance rather than the topic, because that line is what a busy reader decides from.
- An enclosures note, which is what tells the recipient something is missing if it is.
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>Letter to Ravenshill Hotel Group</title>
<style>
/* Continuation pages do not repeat the letterhead, so the first page needs a
deeper top margin than the rest. That is what @page :first is for. */
@page { size: A4; margin: 25mm 22mm 25mm; }
@page :first { margin-top: 42mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10.5pt/1.65 Georgia, "Times New Roman", serif; color: #14110d; }
.letterhead { position: absolute; top: -30mm; left: 0; right: 0; }
.letterhead .brand { font: 700 16pt/1 Arial, sans-serif; letter-spacing: -0.01em; }
.letterhead .strap { font: 8.5pt/1.5 Arial, sans-serif; color: #5a5348; margin-top: 1.5mm; }
.letterhead .rule { border-bottom: 2px solid #14110d; margin-top: 4mm; }
/* The address block is positioned so that after two folds it appears in a
standard DL window: 20mm from the left, 45mm from the top of the sheet.
Those two numbers are the whole reason this block is absolutely placed. */
.recipient { position: absolute; left: 0; top: 3mm; width: 85mm; }
address { font-style: normal; }
.body { margin-top: 34mm; }
.refs { display: flex; justify-content: space-between; font: 9pt Arial, sans-serif;
color: #5a5348; margin-bottom: 8mm; }
h1 { font: 700 11pt/1.4 Arial, sans-serif; margin: 0 0 5mm; }
p { margin: 0 0 4mm; }
.enclosures { margin-top: 8mm; font: 9pt/1.5 Arial, sans-serif; color: #5a5348;
border-top: 1px solid #d8d2c6; padding-top: 3mm; break-inside: avoid; }
.sign { margin-top: 8mm; break-inside: avoid; }
.sign .name { margin-top: 16mm; font-weight: 700; }
</style>
</head>
<body>
<div class="letterhead">
<div class="brand">Kilnworks Studio</div>
<div class="strap">Unit 9, Riverside Works, Bath BA2 3EU ·
01225 440 118 · hello@kilnworks.example</div>
<div class="rule"></div>
</div>
<div class="body">
<div class="recipient">
<address>
Mr Dara Quinn<br>
Operations Director<br>
Ravenshill Hotel Group Ltd<br>
The Old Rectory<br>
Bath<br>
BA1 2QP
</address>
</div>
<div class="refs">
<span>Our ref: KW/RVH/0288</span>
<span>14 May 2026</span>
</div>
<h1>Second firing schedule and the glaze variation you asked about</h1>
<p>Dear Mr Quinn,</p>
<p>
Thank you for the time on site last Tuesday. This letter sets out the revised
firing schedule we discussed and answers the question you raised about tonal
variation between the sample pieces and the first production batch.
</p>
<p>
On the schedule: the second batch will be thrown in the week beginning 08 June
and bisque fired the following week, with the glaze firing on 22 and 23 June.
That puts delivery to Bath in the week beginning 29 June and to Wells the week
after, which is two weeks earlier than the original plan and is possible only
because the kiln slot we were holding for another commission became free.
</p>
<p>
On the variation: the difference you noticed between the two sample plates is a
property of a reduction firing rather than a fault. The atmosphere inside the
kiln is not uniform, and pieces on the lower shelves take more reduction than
those at the top. Across a service of two hundred and twenty covers you should
expect a range rather than a match, and in our experience that range is what
makes a hand-made service read as hand made. If you would prefer a tighter
range we can fire in smaller loads, which adds roughly nine per cent to the
firing cost and about ten days to the schedule.
</p>
<p>
I have enclosed the revised schedule as a single page you can circulate, and a
photograph of six plates from the first batch laid out together so the range is
visible rather than described. If you would like to see them in person, the
studio is open on Thursdays and I would rather you looked before deciding.
</p>
<p>Please let me know by 28 May which of the two firing approaches you would like.</p>
<div class="sign">
Yours sincerely,
<div class="name">Ella Prentice</div>
Studio Director
</div>
<div class="enclosures">
Enc. Revised firing schedule, one page. Photograph, first batch, six plates.<br>
cc. A. Boland, Kilnworks Studio
</div>
</div>
</body>
</html>The layout decision worth understanding
The two page masters do the work here: @page sets the running margin and @page :first sets a deeper top margin so the absolutely positioned letterhead has room. Continuation pages then start at the normal margin with no letterhead, which is what a real letterhead pad does.
The mistake people make adapting it
Positioning the address block by eye and checking it on screen. The only test that means anything is to print the sheet, fold it in three and hold it against a real envelope, because the fold is where the error accumulates and a screen cannot show a fold.
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 business-letter.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 business letter 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.
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.
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.