Legal and awards / A4
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.
When this document is the right one
Someone asks for something outside the agreed scope. The request is usually made verbally and in passing, and this document is what turns it into a decision rather than an assumption.
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 document it amends, and a statement that everything else is unchanged, so the change cannot be read as a replacement.
- Before and after side by side, because a change order describing only the new state cannot be checked against what was agreed.
- The effect on cost and on schedule as separate sections, since a change that adds no cost may still add three weeks.
- A response deadline, because a change request that stays open holds capacity that is not being paid for.
- What happens if it is not agreed, stated as the default rather than left implied.
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>Change order CO-2026-003</title>
<style>
@page { size: A4; margin: 20mm 18mm; }
* { box-sizing: border-box; }
body { margin: 0; font: 10pt/1.5 "Helvetica Neue", Arial, sans-serif; color: #16202b; }
header { display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid #16202b; padding-bottom: 5mm; }
h1 { margin: 0; font-size: 18pt; }
.ref { text-align: right; font-size: 9pt; }
.against { margin: 6mm 0; background: #f2f6f9; border-left: 4px solid #16202b;
padding: 4mm 5mm; break-inside: avoid; }
h2 { font-size: 10.5pt; margin: 7mm 0 2mm; break-after: avoid; }
p { margin: 0 0 3mm; }
/* Before and after, side by side. A change order that describes only the new
state cannot be checked against what was agreed. */
.delta { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin: 4mm 0;
break-inside: avoid; }
.delta > div { border: 1px solid #dbe2e8; padding: 4mm; }
.delta h3 { margin: 0 0 2mm; font-size: 8pt; text-transform: uppercase;
letter-spacing: 0.07em; color: #5b6b7c; }
.delta.was h3 { color: #b3261e; }
table { width: 100%; border-collapse: collapse; margin: 3mm 0; }
th { text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.06em;
color: #5b6b7c; border-bottom: 1.5px solid #16202b; padding-bottom: 2mm; }
td { padding: 2.5mm 0; border-bottom: 1px solid #eef2f5; }
tr { break-inside: avoid; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { border-top: 1.5px solid #16202b; border-bottom: 0; font-weight: 700;
padding-top: 3mm; font-size: 11.5pt; }
.sign { margin-top: 10mm; border-top: 1.5px solid #16202b; padding-top: 5mm;
display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; break-inside: avoid; }
.sign div { border-top: 1px solid #16202b; padding-top: 1.5mm; margin-top: 14mm;
font-size: 8.5pt; color: #5b6b7c; }
</style>
</head>
<body>
<header>
<div>
<h1>Change order</h1>
<div style="margin-top:1.5mm;color:#5b6b7c">Kilnworks Studio Ltd</div>
</div>
<div class="ref">
<strong>CO-2026-003</strong><br>
Raised 02 July 2026<br>
Response required by 09 July 2026
</div>
</header>
<div class="against">
<strong>Amends SOW-2026-014 dated 14 May 2026.</strong> All other terms of that
statement of work and of the underlying Services Agreement are unchanged. This
document has no effect until both parties have signed it.
</div>
<h2>1. Requested change</h2>
<p>
The Client has asked for the Wells property setting to be produced in the darker
glaze trialled in June rather than the house glaze approved in March. The request
was made verbally on 30 June and is recorded here so it can be priced and agreed
rather than absorbed.
</p>
<div class="delta">
<div class="was">
<h3>Was</h3>
110 covers in house glaze, batch 2, delivered 14 August. Single glaze across both
properties. One firing schedule.
</div>
<div>
<h3>Becomes</h3>
110 covers in the darker reduction glaze, batch 2, delivered 28 August. Two glazes
across the two properties. A separate firing schedule for batch 2 and an
additional glaze matching round.
</div>
</div>
<h2>2. Effect on cost</h2>
<table>
<tr><th>Item</th><th class="num">Amount</th></tr>
<tr><td>Additional glaze matching round, batch 2</td><td class="num">450.00</td></tr>
<tr><td>Separate firing schedule, kiln time</td><td class="num">720.00</td></tr>
<tr><td>Additional loss allowance at the trial rate</td><td class="num">385.00</td></tr>
<tfoot>
<tr><td>Increase to the contract sum, excluding VAT</td><td class="num">1,555.00</td></tr>
</tfoot>
</table>
<h2>3. Effect on the schedule</h2>
<p>
Batch 2 moves from 14 August to 28 August, a slip of ten working days. Batch 1 is
unaffected and its acceptance date stands. The final payment milestone moves with
batch 2.
</p>
<h2>4. Effect if not agreed</h2>
<p>
If this change order is not signed by 09 July, batch 2 proceeds in the house glaze
on the original schedule. The kiln slot for the alternative schedule is released on
that date and cannot be assumed to be available afterwards.
</p>
<div class="sign">
<div>For Ravenshill Hotel Group Ltd, name, position, date</div>
<div>For Kilnworks Studio Ltd, name, position, date</div>
</div>
</body>
</html>The layout decision worth understanding
The before column is headed in red and the after in the ordinary colour. The instinct is to emphasise the new state; the more useful emphasis is on what is being given up, because that is the part the person signing has not thought about.
The mistake people make adapting it
Absorbing small changes without raising one. Each is genuinely small and the fourth one is not, and by then there is no document showing that the original scope was ever different. The cost of raising a change order for a small change is a page; the cost of not raising four of them is the project.
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 change-order.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 change order 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.
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.
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.
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.