Legal and awards / A4
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.
When this document is the right one
Terms are agreed and need to be recorded in a form both parties sign. The document is referred to later by clause number, which is why the numbering has to be structural rather than typed.
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.
- A cover page naming both parties with company numbers, because a trading name is not a legal entity.
- Clause numbering produced by CSS counters rather than typed, so inserting a clause renumbers everything after it automatically.
- Defined terms marked visually, so a reader can tell a defined term from an ordinary word without checking the definitions clause.
- Liability exclusions that begin with what cannot be excluded, since a clause that tries to exclude everything is at risk of excluding nothing.
- An execution block forced onto its own page, with an initials line for the parties to initial each page.
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>Services agreement</title>
<style>
@page {
size: A4;
margin: 22mm 20mm 24mm;
}
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.6 Georgia, "Times New Roman", serif; color: #111;
counter-reset: clause; }
.cover { text-align: center; padding: 20mm 0 14mm; border-bottom: 2px solid #111; }
.cover h1 { margin: 0 0 6mm; font-size: 20pt; letter-spacing: 0.02em; }
.cover .parties { font-size: 11pt; line-height: 2; }
.cover .dated { margin-top: 10mm; font: 9.5pt Arial, sans-serif; color: #555; }
h2 { font: 700 10.5pt/1.4 Arial, sans-serif; margin: 8mm 0 3mm;
/* A clause heading at the foot of a page with its text overleaf is the
classic generated-contract tell. */
break-after: avoid; }
h2::before { counter-increment: clause; content: counter(clause) ". "; }
ol.sub { counter-reset: sub; list-style: none; padding-left: 0; margin: 0; }
ol.sub > li { counter-increment: sub; position: relative; padding-left: 14mm;
margin-bottom: 3mm; }
ol.sub > li::before { position: absolute; left: 0;
content: counter(clause) "." counter(sub); color: #555;
font: 9pt Arial, sans-serif; }
.defined { font-variant: small-caps; }
/* Signatures never split, and never sit alone. Forcing the page break before
the block is more reliable than hoping the content lands well. */
.execution { break-before: page; break-inside: avoid; margin-top: 6mm; }
.execution h2 { margin-top: 0; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 8mm; }
.sig-box { border: 1px solid #111; padding: 5mm; }
.sig-box .role { font: 700 9pt Arial, sans-serif; margin-bottom: 3mm; }
.sig-box .line { border-bottom: 1px solid #111; height: 15mm; margin-bottom: 1.5mm; }
.sig-box .cap { font: 8pt Arial, sans-serif; color: #555; margin-bottom: 4mm; }
.initials { margin-top: 10mm; font: 8.5pt Arial, sans-serif; color: #555;
border-top: 1px solid #ddd; padding-top: 3mm; display: flex;
justify-content: space-between; }
.initials span { border-bottom: 1px solid #111; width: 30mm; display: inline-block; }
</style>
</head>
<body>
<div class="cover">
<h1>Services Agreement</h1>
<div class="parties">
<strong>Kilnworks Studio Ltd</strong> (company number 11447203)<br>
and<br>
<strong>Ravenshill Hotel Group Ltd</strong> (company number 08812204)
</div>
<div class="dated">Dated 14 May 2026</div>
</div>
<h2>Interpretation</h2>
<ol class="sub">
<li>In this agreement, <span class="defined">Services</span> means the design,
production and delivery of the tableware range described in Schedule 1, and
<span class="defined">Deliverables</span> means the physical items produced
under it.</li>
<li><span class="defined">Acceptance</span> means written confirmation by the
Client that a delivered batch conforms to Schedule 1, or the expiry of ten
working days from delivery without written objection, whichever is earlier.</li>
<li>Headings are for convenience and do not affect interpretation. A reference to
a Schedule is a reference to a schedule to this agreement.</li>
</ol>
<h2>Supply of the Services</h2>
<ol class="sub">
<li>The Supplier shall provide the Services with reasonable skill and care and in
accordance with Schedule 1.</li>
<li>The Deliverables are hand made. Dimensional variation of up to four per cent
and variation in glaze tone between firings are properties of the process and
do not constitute a defect.</li>
<li>Delivery dates are estimates given in good faith. Time is not of the essence
unless the parties have agreed a firm date in writing and identified it as such.</li>
</ol>
<h2>Charges and payment</h2>
<ol class="sub">
<li>The Client shall pay the charges set out in Schedule 2. A deposit of forty per
cent is payable on signature and is non-refundable once production has begun.</li>
<li>Invoices are payable within thirty days of the invoice date. Interest on late
payment accrues under the Late Payment of Commercial Debts (Interest) Act 1998.</li>
<li>All sums are exclusive of value added tax, which is payable in addition at
the applicable rate.</li>
</ol>
<h2>Intellectual property</h2>
<ol class="sub">
<li>The Supplier retains all intellectual property in its designs, moulds and
glaze formulations, including those developed in the course of this agreement.</li>
<li>The Client is granted a non-exclusive, royalty-free licence to photograph and
depict the Deliverables in its own marketing, for the life of the range.</li>
<li>Neither party may use the other's name or marks in a case study or press
release without prior written consent, which shall not be unreasonably withheld.</li>
</ol>
<h2>Limitation of liability</h2>
<ol class="sub">
<li>Nothing in this agreement limits liability for death or personal injury caused
by negligence, for fraud, or for any other liability that cannot lawfully be
limited.</li>
<li>Subject to the above, neither party is liable for loss of profit, loss of
business or any indirect or consequential loss.</li>
<li>Subject to the above, each party's total liability under this agreement is
limited to the total charges paid and payable under it.</li>
</ol>
<h2>Term and termination</h2>
<ol class="sub">
<li>This agreement begins on the date above and continues until the Services are
completed and accepted, unless terminated earlier.</li>
<li>Either party may terminate immediately on written notice if the other commits
a material breach that is not remedied within twenty working days of a written
request to remedy it.</li>
<li>On termination the Client shall pay for all work performed and materials
committed up to the date of termination.</li>
</ol>
<h2>General</h2>
<ol class="sub">
<li>This agreement and the Schedules are the entire agreement between the parties
and supersede all prior discussions, including any quotation.</li>
<li>No variation is effective unless in writing and signed by both parties.</li>
<li>This agreement is governed by the law of England and Wales, and the parties
submit to the exclusive jurisdiction of its courts.</li>
</ol>
<div class="execution">
<h2>Execution</h2>
<p>This agreement has been entered into on the date stated at the beginning of it.</p>
<div class="sig-grid">
<div class="sig-box">
<div class="role">For and on behalf of Kilnworks Studio Ltd</div>
<div class="line"></div><div class="cap">Signature</div>
<div class="line"></div><div class="cap">Name and position</div>
<div class="line"></div><div class="cap">Date</div>
</div>
<div class="sig-box">
<div class="role">For and on behalf of Ravenshill Hotel Group Ltd</div>
<div class="line"></div><div class="cap">Signature</div>
<div class="line"></div><div class="cap">Name and position</div>
<div class="line"></div><div class="cap">Date</div>
</div>
</div>
<div class="initials">
<span></span><span></span>
</div>
</div>
</body>
</html>The layout decision worth understanding
The numbering uses counter-reset on the body and counter-increment on each heading, with sub-clauses in a nested counter. That is the whole reason this is worth doing in HTML: a renumber that would be a careful manual pass in a word processor is automatic here. Clause headings carry break-after: avoid, and the execution block carries break-before: page.
The mistake people make adapting it
Letting a clause heading sit at the foot of a page with its text overleaf. It is the classic tell of a generated contract, and it also makes the document genuinely harder to read at the exact moment someone is checking a specific clause.
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 contract.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 services agreement 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.
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.
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.
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.