Events, hospitality and membership / A6
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.
When this document is the right one
Someone buys credit for someone else. The document is the instrument rather than a record of one, which changes the terms: losing it matters in a way that losing a receipt does not.
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 value set large, because it is the one thing both the giver and the recipient look for.
- A redemption code in a monospace face at a size that survives being read aloud over a telephone.
- Space for a to and a from, handwritten, since this is a gift and a printed name defeats the point.
- An expiry date, stated rather than implied, because unredeemed vouchers are a liability on the balance sheet until they expire.
- What happens to an unused balance, which is the question that follows every partial redemption.
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>Gift voucher GV-2026-0331</title>
<style>
/* A6, which is a quarter of an A4 sheet: four vouchers print per sheet and
trim cleanly, and it is the size a card envelope expects. */
@page { size: 148mm 105mm; margin: 0; }
* { box-sizing: border-box; }
body { margin: 0; height: 105mm; padding: 8mm;
font: 9pt/1.45 Georgia, "Times New Roman", serif; color: #241f18;
background: #f7f2e7;
print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.card { height: 100%; border: 1px solid #a8916a; padding: 7mm 8mm;
display: flex; flex-direction: column; background: #fffdf8; }
header { display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px solid #e0d5bd; padding-bottom: 3mm; }
.brand { font: 700 10pt/1 Arial, sans-serif; letter-spacing: 0.16em;
text-transform: uppercase; color: #6d5628; }
.serial { font: 7.5pt Arial, sans-serif; color: #8d846f;
font-variant-numeric: tabular-nums; }
.value { text-align: center; margin: 5mm 0 3mm; }
.value .amount { font-size: 30pt; font-weight: 700; line-height: 1; color: #241f18; }
.value .words { font-size: 8.5pt; color: #6b6250; margin-top: 1.5mm; }
/* The code is the bearer instrument. It is set in a mono face at a size that
survives being read aloud over a telephone. */
.code { text-align: center; border: 1px dashed #a8916a; padding: 3mm;
font: 700 13pt/1 "IBM Plex Mono", "Courier New", monospace;
letter-spacing: 0.16em; }
.to-from { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 4mm;
font-size: 8.5pt; }
.to-from .k { font: 7pt/1 Arial, sans-serif; text-transform: uppercase;
letter-spacing: 0.08em; color: #8d846f; }
.to-from .line { border-bottom: 1px solid #d8cdb4; min-height: 6mm; padding-top: 1mm; }
.terms { margin-top: auto; font: 6.8pt/1.35 Arial, sans-serif; color: #8d846f;
border-top: 1px solid #e0d5bd; padding-top: 2.5mm; }
</style>
</head>
<body>
<div class="card">
<header>
<div class="brand">Kilnworks Studio</div>
<div class="serial">GV-2026-0331</div>
</header>
<div class="value">
<div class="amount">GBP 75.00</div>
<div class="words">Seventy five pounds, to spend in the studio or online</div>
</div>
<div class="code">KW-7Q4M-31XB</div>
<div class="to-from">
<div><div class="k">To</div><div class="line">Helen</div></div>
<div><div class="k">From</div><div class="line">Marcus</div></div>
</div>
<p class="terms">
Valid until 20 June 2027. Redeemable in the Bath studio or at kilnworks.example
against any purchase, including workshops. Not redeemable for cash and not
replaceable if lost, because this voucher is the instrument rather than a record
of one. Any unused balance stays on the code and can be spent in later visits.
Issued by Kilnworks Studio Ltd, company number 11447203.
</p>
</div>
</body>
</html>The layout decision worth understanding
Set at A6, so four print per A4 sheet and trim cleanly, and so it fits a standard card envelope. Backgrounds carry print-color-adjust: exact, because the cream ground is most of what makes this look like a voucher rather than a printout, and it is dropped from print output by default.
The mistake people make adapting it
Using an alphabet with characters that are ambiguous when read aloud or handwritten. Zero and the letter O, one and the letter I, five and S. Excluding those from the code alphabet costs a few bits of entropy and removes an entire class of support call.
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 gift-voucher.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 gift voucher 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.
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.
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.
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.