People and payroll / A4
Employment offer letter template
A letter offering a role, stating the principal terms in a scannable block, the conditions the offer depends on, and an acceptance section to sign and return.
When this document is the right one
A hiring decision is made. The letter is read once carefully by the candidate and then again by whoever compares it against the contract, so the terms have to be extractable rather than buried in prose.
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.
- The principal terms as a definition list rather than as sentences, because this is the part the candidate will re-read and compare against another offer.
- Conditions stated as conditions, naming right to work and references, since an offer withdrawn later without having said this is a serious problem.
- A deadline for acceptance, so the role is not held open indefinitely.
- What to bring on the first day, which is small and is the thing most often handled by a separate email that gets lost.
- An acceptance block with a confirmation that the candidate is not bound by a restriction elsewhere.
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>Offer of employment, S. Whitlock</title>
<style>
@page { size: A4; margin: 25mm 22mm 25mm; }
@page :first { margin-top: 38mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10.5pt/1.65 Georgia, "Times New Roman", serif; color: #14110d; }
.letterhead { position: absolute; top: -24mm; left: 0; right: 0;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px solid #14110d; padding-bottom: 4mm; }
.brand { font: 700 14pt/1 Arial, sans-serif; }
.contact { font: 8.5pt/1.5 Arial, sans-serif; color: #5a5348; text-align: right; }
.date { text-align: right; margin-bottom: 7mm; font: 9.5pt Arial, sans-serif; }
address { font-style: normal; margin-bottom: 8mm; }
h1 { font: 700 12pt/1.4 Arial, sans-serif; margin: 0 0 5mm; }
.terms { margin: 6mm 0; border-top: 1px solid #d8d2c6; border-bottom: 1px solid #d8d2c6;
padding: 5mm 0; break-inside: avoid; }
.terms dl { display: grid; grid-template-columns: 42mm 1fr; gap: 2.5mm 5mm; margin: 0;
font: 9.5pt/1.5 Arial, sans-serif; }
.terms dt { color: #5a5348; }
.terms dd { margin: 0; }
h2 { font: 700 10pt/1.4 Arial, sans-serif; margin: 7mm 0 2mm; break-after: avoid; }
p { margin: 0 0 4mm; }
/* The acceptance block is the point of the letter. If it lands alone on a
final page the document reads as an error. */
.acceptance { margin-top: 10mm; border: 1.5px solid #14110d; padding: 6mm;
break-inside: avoid; }
.acceptance h2 { margin-top: 0; }
.sig-grid { display: grid; grid-template-columns: 1fr 45mm; gap: 10mm; margin-top: 14mm; }
.sig-grid div { border-top: 1px solid #14110d; padding-top: 1.5mm;
font: 8.5pt Arial, sans-serif; color: #5a5348; }
</style>
</head>
<body>
<div class="letterhead">
<div class="brand">Kilnworks Studio</div>
<div class="contact">
Unit 9, Riverside Works, Bath BA2 3EU<br>
people@kilnworks.example · 01225 440 118
</div>
</div>
<div class="date">14 May 2026</div>
<address>
Ms Sara Whitlock<br>
22 Larkhall Terrace<br>
Bath BA1 6RN
</address>
<h1>Offer of employment: Senior Ceramicist</h1>
<p>Dear Sara,</p>
<p>
Following your interviews on 28 April and 07 May, I am pleased to offer you the
position of Senior Ceramicist at Kilnworks Studio Ltd. The principal terms are
set out below and the full terms are in the contract of employment enclosed with
this letter.
</p>
<div class="terms">
<dl>
<dt>Position</dt><dd>Senior Ceramicist</dd>
<dt>Reporting to</dt><dd>Ella Prentice, Studio Director</dd>
<dt>Start date</dt><dd>Monday 01 June 2026</dd>
<dt>Location</dt><dd>Unit 9, Riverside Works, Bath. Studio based.</dd>
<dt>Hours</dt><dd>35 per week, Monday to Friday, with flexibility around firing schedules</dd>
<dt>Salary</dt><dd>GBP 38,400 per year, paid monthly in arrears on the 28th</dd>
<dt>Probation</dt><dd>Six months, with a review at three</dd>
<dt>Notice</dt><dd>One week during probation, then two months either side</dd>
<dt>Holiday</dt><dd>28 days including public holidays, accruing monthly</dd>
<dt>Pension</dt><dd>Auto-enrolment, 5% employee and 3% employer on qualifying earnings</dd>
</dl>
</div>
<h2>Conditions of this offer</h2>
<p>
This offer is conditional on proof of your right to work in the United Kingdom,
which we must see before your first day, and on two satisfactory references, one
of which should be your most recent employer. If either condition is not met the
offer will be withdrawn.
</p>
<h2>What happens next</h2>
<p>
Please sign and return one copy of this letter, either by post or as a scan to
people@kilnworks.example, by <strong>28 May 2026</strong>. The offer lapses after
that date. Bring your passport or share code, and your P45 if you have one, on
your first morning.
</p>
<p>
We are looking forward to having you in the studio. If anything here is not what
you expected from our conversations, call me before signing rather than after.
</p>
<p>Yours sincerely,</p>
<p style="margin-top:14mm"><strong>Ella Prentice</strong><br>Studio Director</p>
<div class="acceptance">
<h2>Acceptance</h2>
<p style="margin:0">
I accept the offer of employment on the terms set out in this letter and in the
enclosed contract of employment, and I confirm that I am not bound by any
restriction that would prevent me from taking up this role.
</p>
<div class="sig-grid">
<div>Signed, Sara Whitlock</div>
<div>Date</div>
</div>
</div>
</body>
</html>The layout decision worth understanding
The acceptance block is bordered and carries break-inside: avoid. It is the operative part of the letter and a signature line alone on a second page is the most common way a generated letter looks generated. The first page uses a deeper top margin through @page :first so the letterhead has room.
The mistake people make adapting it
Describing terms in the letter that differ from the contract enclosed with it. The candidate reads the letter and signs the contract, and the difference surfaces six months later when someone checks. The letter should summarise the contract, never restate it in different words.
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 offer-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 offer of employment 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.
Payslip HTML template with CSS
A statement of pay for one period: gross made of its parts, deductions made of theirs, the net that was actually paid, and the year to date.
Weekly timesheet PDF template
Hours by project and by day across a week, totalled both ways, with an approval signature.
Expense report HTML template
An itemised claim for reimbursement: expenses with receipts and business purposes, mileage calculated separately, and a policy note explaining the rules being applied.
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.