Legal and awards / A4 landscape
Certificate HTML template with border
A landscape award document: a double frame, the recipient's name as the largest element, a citation, and two signatures with a seal between them.
When this document is the right one
Something has been completed or awarded and the recipient will keep the document. It is one of very few generated documents whose purpose is to be displayed, which changes every design constraint.
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.
- Landscape orientation, because the name is the widest element and portrait forces it to wrap.
- A citation that says what was actually done, with hours or assessment criteria, since a certificate with no substance is decoration.
- Two signatures rather than one, which is what distinguishes an award from a statement about oneself.
- A serial number and a verification address, so the certificate can be checked by a third party.
- A drawn frame rather than a page margin, since the border is part of the composition and has to be visible.
The template
A complete file. Doctype, stylesheet, body: paste it into a renderer unchanged and it produces a finished A4 landscape page. Replace the sample data and the styling holds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Certificate of completion</title>
<style>
/* Landscape, because a certificate is a single composition and the name has
to be the widest thing on it. */
@page { size: A4 landscape; margin: 0; }
* { box-sizing: border-box; }
body {
margin: 0;
/* The full page is the design, so the frame is drawn rather than left to
the page margin. */
padding: 12mm;
height: 210mm;
font: 11pt/1.6 Georgia, "Times New Roman", serif;
color: #2a2418;
background: #fdfbf5;
/* Backgrounds are dropped from print output unless this is set, and a
certificate with no background is a page of text. */
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.frame { height: 100%; border: 2.5px solid #8a6d3b; padding: 4mm; }
.inner { height: 100%; border: 0.8px solid #b79a68; padding: 12mm 18mm;
display: flex; flex-direction: column; align-items: center;
text-align: center; }
.crest { width: 20mm; height: 20mm; border: 1.5px solid #8a6d3b; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font: 700 9pt/1 Arial, sans-serif; letter-spacing: 0.1em; color: #8a6d3b; }
.issuer { margin-top: 5mm; font: 700 11pt/1 Arial, sans-serif; letter-spacing: 0.22em;
text-transform: uppercase; color: #6d5628; }
h1 { margin: 9mm 0 0; font-size: 26pt; font-weight: 400; letter-spacing: 0.1em;
text-transform: uppercase; }
.rule { width: 55mm; height: 1px; background: #b79a68; margin: 5mm 0; }
.presented { font-size: 10.5pt; color: #6b6250; letter-spacing: 0.05em; }
.name { margin: 4mm 0; font-size: 34pt; line-height: 1.1;
font-family: "Georgia", serif; font-style: italic; color: #2a2418; }
.citation { max-width: 175mm; margin: 3mm 0 0; }
.footer { margin-top: auto; width: 100%; display: grid;
grid-template-columns: 1fr 46mm 1fr; gap: 14mm; align-items: end; }
.sig .line { border-top: 1px solid #2a2418; padding-top: 2mm;
font: 8.5pt/1.4 Arial, sans-serif; color: #6b6250; }
.sig .who { font-weight: 700; color: #2a2418; }
.seal { width: 30mm; height: 30mm; margin: 0 auto; border: 1.5px double #8a6d3b;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font: 7.5pt/1.3 Arial, sans-serif; color: #8a6d3b; }
.serial { margin-top: 4mm; font: 8pt Arial, sans-serif; color: #9a917c;
letter-spacing: 0.08em; }
</style>
</head>
<body>
<div class="frame"><div class="inner">
<div class="crest">KW</div>
<div class="issuer">Kilnworks Studio</div>
<h1>Certificate of Completion</h1>
<div class="rule"></div>
<div class="presented">This is to certify that</div>
<div class="name">Sara Whitlock</div>
<div class="presented">has successfully completed</div>
<p class="citation">
the <strong>Advanced Reduction Glazing</strong> programme, comprising ninety
hours of studio instruction and six supervised firings, assessed on portfolio
and on kiln practice, and has met the standard required for independent
operation of a gas reduction kiln.
</p>
<div class="footer">
<div class="sig">
<div class="line"><span class="who">Ella Prentice</span><br>Studio Director</div>
</div>
<div>
<div class="seal">Awarded<br>14 May 2026<br>Bath</div>
</div>
<div class="sig">
<div class="line"><span class="who">Dr Marcus Oyelaran</span><br>External Assessor</div>
</div>
</div>
<div class="serial">Certificate KW-ARG-2026-0044 · verify at kilnworks.example/verify</div>
</div></div>
</body>
</html>The layout decision worth understanding
This is the one template in the set that depends on print-color-adjust: exact. Background colours and tints are dropped from print output by default, and a certificate whose cream ground and gold frame silently disappear is a page of centred text. It is set on both the standard and prefixed properties because the unprefixed form is not universally implemented.
The mistake people make adapting it
Relying on a decorative script font that is not embedded. The name renders in a fallback, nobody notices in review because the reviewer has the font installed, and the recipient gets a certificate set in the system default.
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 certificate.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 certificate is a A4 landscape 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.
Contract HTML template with numbered clauses
A two-party agreement with automatically numbered clauses and sub-clauses, a cover page, and an execution block that cannot be orphaned.
NDA HTML template
A mutual confidentiality agreement with the two commercially significant terms, the definition of confidential information and the duration, pulled out into a box.
Statement of work HTML template
Scope, deliverables with acceptance criteria, assumptions, an explicit out-of-scope list and a milestone payment schedule, under an existing master agreement.
Change order HTML template
A signed amendment to an existing statement of work, showing the change as a before and after, with its effect on cost, schedule, and what happens if it is not agreed.
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.
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.