Events, hospitality and membership / A5
Event programme PDF template
A timed schedule on A5, with the fixed item marked, and practical arrival information at the foot.
When this document is the right one
An event with a running order that attendees need in their hand. The document is folded, put in a pocket and consulted in a crowd, which decides its size and its type sizes.
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.
- Times as a left column and events as a right one, because the reader is looking up a time rather than reading a list.
- The one item that cannot move marked visually, since knowing which parts of a schedule are elastic is what stops people missing the part that is not.
- A short note under each item saying what it actually involves, so an attendee can decide what to skip.
- Getting-there information including access, because that is the practical question and it is usually only on a website.
- Contact details at the foot, which is where someone standing outside the wrong door will look.
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>Programme, Kilnworks Open Studio</title>
<style>
/* A5, printed two-up on A4 and folded. That is what a programme has always
been and it is why the size is not A4. */
@page { size: A5; margin: 12mm 11mm 14mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 9pt/1.45 "Helvetica Neue", Arial, sans-serif; color: #101820; }
header { text-align: center; border-bottom: 2px solid #101820; padding-bottom: 5mm; }
.eyebrow { font-size: 7.5pt; letter-spacing: 0.22em; text-transform: uppercase;
color: #6b6f76; }
h1 { margin: 3mm 0 0; font-size: 20pt; line-height: 1.1; letter-spacing: -0.01em; }
.when { margin-top: 2.5mm; font-size: 9.5pt; }
h2 { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em; color: #6b6f76;
margin: 7mm 0 2mm; break-after: avoid; }
/* A timed schedule is a two column grid rather than a table: the time is a
label, not data, and the description wraps under itself rather than
across a cell boundary. */
.schedule { display: grid; grid-template-columns: 17mm 1fr; gap: 2mm 4mm; }
.schedule .t { font-variant-numeric: tabular-nums; font-weight: 700; }
.schedule .e { border-bottom: 1px solid #e6e8ea; padding-bottom: 2mm; }
.schedule .e strong { display: block; }
.schedule .e small { color: #6b6f76; }
.schedule .highlight { border-left: 3px solid #101820; padding-left: 3mm;
margin-left: -3mm; border-bottom: 0; }
.map { margin-top: 6mm; border: 1px solid #d5d8db; padding: 4mm; font-size: 8.5pt;
break-inside: avoid; }
.map strong { display: block; margin-bottom: 1.5mm; }
footer { margin-top: 6mm; border-top: 1px solid #e6e8ea; padding-top: 3mm;
font-size: 7.5pt; color: #6b6f76; text-align: center; }
</style>
</head>
<body>
<header>
<div class="eyebrow">Kilnworks Studio</div>
<h1>Open Studio<br>and Kiln Opening</h1>
<div class="when">Saturday 20 June 2026 · Unit 9, Riverside Works, Bath</div>
</header>
<h2>Programme</h2>
<div class="schedule">
<div class="t">13:30</div>
<div class="e"><strong>Doors</strong><small>Tea in the yard. The kiln is already
cooling and you can see it, but not open it.</small></div>
<div class="t">14:00</div>
<div class="e"><strong>Welcome and a short talk</strong><small>Ella Prentice on
what reduction firing does and why it cannot be predicted.</small></div>
<div class="t">14:30</div>
<div class="e"><strong>Throwing demonstration</strong><small>Sara Whitlock, at the
wheel in the main studio. Standing room, so arrive a few minutes early.</small></div>
<div class="t">15:30</div>
<div class="e highlight"><strong>Kiln opening</strong><small>The reason for the day.
This runs to the kiln's schedule and cannot be held for late arrivals.</small></div>
<div class="t">16:15</div>
<div class="e"><strong>Seconds sale</strong><small>Pieces that did not make the
grade, at a price that reflects it. Cash and card.</small></div>
<div class="t">17:30</div>
<div class="e"><strong>Close</strong><small>The yard stays open until 18:00 for
anyone who wants to keep talking.</small></div>
</div>
<div class="map">
<strong>Getting here</strong>
Unit 9 is at the far end of Riverside Works, past the two red doors. Fifteen minutes
on foot from Bath Spa station along the towpath. There is no visitor parking on site;
the Green Park car park is a ten minute walk. The studio is on one level with a ramp
at the yard entrance. Assistance dogs welcome.
</div>
<footer>
kilnworks.example/open · hello@kilnworks.example · 01225 440 118
</footer>
</body>
</html>The layout decision worth understanding
A5, printed two-up on A4 and folded, which is what a programme has always been. The schedule is a two-column CSS grid rather than a table: the time is a label rather than data, and a grid lets a long description wrap under itself instead of across a cell boundary.
The mistake people make adapting it
Printing a schedule with no indication of which items are fixed. Attendees plan around the whole list, one item runs late, and the fixed item that could not wait happens without half the audience. Marking the immovable item costs one border and saves the day.
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 event-programme.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 event programme 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.
Event ticket HTML template with stub
A landscape ticket with a tear-off stub, a scannable code sized in absolute units, and terms that a gate can actually enforce.
Gift voucher HTML template
A bearer instrument at postcard size: a value, a redemption code set to be read aloud, space for names, and terms that say what happens to an unused balance.
Restaurant menu HTML template
A single-sided menu with leader dots between the dish and the price, dietary marks, and an allergen note that promises only what a kitchen can deliver.
Membership card PDF template
An ID-1 wallet card with the organisation, the member, a membership number and a tier, on a dark ground that has to survive print.
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.