Events, hospitality and membership / A6
Appointment card PDF template
A pocket card whose entire purpose is one date and one time, with the cancellation rule stated where it will be seen.
When this document is the right one
An appointment is booked and the person needs to leave with it. It is handed over at a desk and put in a bag, and it will be looked at once, weeks later, for one fact.
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 day, date and time set at three different sizes, so the hierarchy answers the question before anything is read.
- The practitioner and the appointment type, because a household with several appointments needs to tell them apart.
- A reference number, which is what a phone call to reschedule is traced by.
- The cancellation rule and the notice period, stated on the card rather than in a policy document nobody has.
- The telephone number next to that rule, since the two are only useful together.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A6 page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Appointment, 04 June 2026</title>
<style>
/* A6, so it fits a pocket and prints four to a sheet. An appointment card
that has to be folded gets lost. */
@page { size: 105mm 148mm; margin: 0; }
* { box-sizing: border-box; }
body { margin: 0; height: 148mm; padding: 9mm; font: 9pt/1.4 Arial, sans-serif;
color: #14110d; display: flex; flex-direction: column; }
header { border-bottom: 2px solid #14110d; padding-bottom: 3mm; }
.org { font-size: 11pt; font-weight: 700; }
.org small { display: block; font-size: 7.5pt; font-weight: 400; color: #6b6250;
margin-top: 0.8mm; }
/* The date and time are the entire document. Everything else is context,
and the size difference should say so without being read. */
.when { margin: 7mm 0 5mm; }
.when .day { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.14em;
color: #6b6250; }
.when .date { font-size: 24pt; font-weight: 700; line-height: 1.05; }
.when .time { font-size: 18pt; font-weight: 700; font-variant-numeric: tabular-nums;
margin-top: 1mm; }
dl { display: grid; grid-template-columns: 24mm 1fr; gap: 2mm 3mm; margin: 0;
font-size: 8.5pt; border-top: 1px solid #ddd8cc; padding-top: 4mm; }
dt { color: #6b6250; }
dd { margin: 0; }
.notice { margin-top: auto; border: 1px solid #14110d; padding: 3mm;
font-size: 7.5pt; line-height: 1.35; }
.notice strong { display: block; margin-bottom: 1mm; }
</style>
</head>
<body>
<header>
<div class="org">Riverside Dental Practice<small>12 Walcot Street, Bath BA1 5BN</small></div>
</header>
<div class="when">
<div class="day">Thursday</div>
<div class="date">4 June 2026</div>
<div class="time">10:20</div>
</div>
<dl>
<dt>Patient</dt><dd>H. Ashworth</dd>
<dt>With</dt><dd>Ms J. Farrow, hygienist</dd>
<dt>Appointment</dt><dd>Scale and polish, 30 minutes</dd>
<dt>Reference</dt><dd>APT-2026-8841</dd>
</dl>
<div class="notice">
<strong>If you cannot make it</strong>
Call 01225 440 771 at least 24 hours before. A missed appointment or a cancellation
inside 24 hours is charged at the full fee, because the slot cannot be filled at
that notice. Please arrive five minutes early; arriving late shortens the
appointment rather than extending it.
</div>
</body>
</html>The layout decision worth understanding
A6, so it fits a pocket without folding and prints four to a sheet. The card is a flex column with the cancellation notice pushed to the bottom by margin-top: auto, which keeps it at the foot regardless of how many detail lines the appointment needs.
The mistake people make adapting it
Leaving the cancellation policy off the card. The no-show rate is driven by how easy it is to cancel, and a person who cannot find the number does not cancel, they simply do not come. The number and the notice period on the card are worth more than any reminder system.
Rendering it
The page box is declared in the template's own CSS as A6, so the size travels with the markup rather than living in the code that calls the renderer. A6 is not one of the six named formats the API accepts, so set prefer_css_page_size on the request and the renderer will use the page box the document declares.
curl -X POST https://api.pdfpipe.xyz/v1/pdf \
-H "Authorization: Bearer $PDFPIPE_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!doctype html>...",
"options": { "prefer_css_page_size": true }
}' \
--output appointment-card.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 appointment card is a A6 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.
Event programme PDF template
A timed schedule on A5, with the fixed item marked, and practical arrival information at the foot.
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.
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.
A6 page size for PDF generation
A6 is postcard size, a quarter of an A4 sheet, and the smallest ISO size that still holds a paragraph comfortably.
Paste the template into the playground and get the PDF back. No signup, no key.