The HTML behind it
Quote template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 794px 1123px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 8px 10px; }</style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" data-thirds-page="p1" data-thirds-name="Page 1" style="width:794px;height:1123px;background:#ffffff">
<div data-thirds="box" data-thirds-id="header-band" data-thirds-name="Header band" style="left:0px;top:0px;width:794px;height:150px;background:#0a46ff"></div>
<div data-thirds="text" data-thirds-id="business-name" data-thirds-name="Business name" style="left:56px;top:48px;width:400px;height:32px;font-size:22px;color:#ffffff;font-weight:700;line-height:1.2;">{{ business_name }}</div>
<div data-thirds="text" data-thirds-id="business-contact" data-thirds-name="Business contact" style="left:56px;top:84px;width:400px;height:40px;font-size:12px;color:#dbe4ff;font-weight:400;line-height:1.4;">{{ business_address }}<br>{{ business_email }}</div>
<div data-thirds="text" data-thirds-id="title" data-thirds-name="Title" style="left:500px;top:44px;width:238px;height:60px;font-size:44px;color:#ffffff;font-weight:800;line-height:1.2;text-align:right;">Quote</div>
<div data-thirds="text" data-thirds-id="quote-number" data-thirds-name="Quote number" style="left:500px;top:100px;width:238px;height:24px;font-size:14px;color:#dbe4ff;font-weight:700;line-height:1.2;text-align:right;">{{ quote_number }}</div>
<div data-thirds="text" data-thirds-id="prepared-for-label" data-thirds-name="Prepared for label" style="left:56px;top:190px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Prepared for</div>
<div data-thirds="text" data-thirds-id="client" data-thirds-name="Client" style="left:56px;top:214px;width:320px;height:70px;font-size:14px;color:#0b0b0b;font-weight:400;line-height:1.4;"><strong>{{ client_name }}</strong><br>{{ client_address }}</div>
<div data-thirds="text" data-thirds-id="issued-label" data-thirds-name="Issued label" style="left:440px;top:190px;width:140px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Issued</div>
<div data-thirds="text" data-thirds-id="issued-on" data-thirds-name="Issued on" style="left:440px;top:214px;width:140px;height:24px;font-size:14px;color:#0b0b0b;font-weight:400;line-height:1.2;">{{ issued_on|date }}</div>
<div data-thirds="text" data-thirds-id="valid-label" data-thirds-name="Valid label" style="left:600px;top:190px;width:138px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Valid until</div>
<div data-thirds="text" data-thirds-id="valid-until" data-thirds-name="Valid until" style="left:600px;top:214px;width:138px;height:24px;font-size:14px;color:#0a46ff;font-weight:700;line-height:1.2;">{{ valid_until|date }}</div>
<div data-thirds="text" data-thirds-id="intro" data-thirds-name="Intro" style="left:56px;top:300px;width:682px;height:50px;font-size:13px;color:#3b4252;font-weight:400;line-height:1.45;">{{ intro }}</div>
<table data-thirds="table" data-thirds-id="items" data-thirds-name="Items" style="left:56px;top:370px;width:682px;font-size:13px;--head:#eaf0ff;"><thead><tr><th>Description</th><th style="text-align:right">Qty</th><th style="text-align:right">Unit price</th><th style="text-align:right">Amount</th></tr></thead><tbody>{% for item in items %}<tr><td>{{ item.description }}</td><td style="text-align:right">{{ item.quantity|number }}</td><td style="text-align:right">{{ item.unit_price|currency }}</td><td style="text-align:right">{{ item.amount|currency }}</td></tr>{% endfor %}</tbody></table>
<div data-thirds="text" data-thirds-id="subtotal-label" data-thirds-name="Subtotal label" style="left:440px;top:760px;width:150px;height:22px;font-size:13px;color:#575f6d;font-weight:400;line-height:1.2;">Subtotal</div>
<div data-thirds="text" data-thirds-id="subtotal" data-thirds-name="Subtotal" style="left:590px;top:760px;width:148px;height:22px;font-size:13px;color:#0b0b0b;font-weight:400;line-height:1.2;text-align:right;">{{ subtotal|currency }}</div>
<div data-thirds="text" data-thirds-id="tax-label" data-thirds-name="Tax label" style="left:440px;top:790px;width:150px;height:22px;font-size:13px;color:#575f6d;font-weight:400;line-height:1.2;">{{ tax_label }}</div>
<div data-thirds="text" data-thirds-id="tax" data-thirds-name="Tax" style="left:590px;top:790px;width:148px;height:22px;font-size:13px;color:#0b0b0b;font-weight:400;line-height:1.2;text-align:right;">{{ tax|currency }}</div>
<div data-thirds="box" data-thirds-id="total-box" data-thirds-name="Total box" style="left:440px;top:826px;width:298px;height:56px;background:#0a46ff;border-radius:6px"></div>
<div data-thirds="text" data-thirds-id="total-label" data-thirds-name="Total label" style="left:456px;top:842px;width:120px;height:26px;font-size:18px;color:#ffffff;font-weight:700;line-height:1.2;">Total</div>
<div data-thirds="text" data-thirds-id="total" data-thirds-name="Total" style="left:560px;top:842px;width:162px;height:26px;font-size:18px;color:#ffffff;font-weight:700;line-height:1.2;text-align:right;">{{ total|currency }}</div>
<div data-thirds="text" data-thirds-id="terms-label" data-thirds-name="Terms label" style="left:56px;top:930px;width:300px;height:20px;font-size:11px;color:#575f6d;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">Terms</div>
<div data-thirds="text" data-thirds-id="terms" data-thirds-name="Terms" style="left:56px;top:954px;width:682px;height:60px;font-size:12px;color:#3b4252;font-weight:400;line-height:1.45;">{{ terms }}</div>
<div data-thirds="box" data-thirds-id="footer-rule" data-thirds-name="Footer rule" style="left:56px;top:1050px;width:682px;height:1px;background:#dde1e8"></div>
<div data-thirds="text" data-thirds-id="footer" data-thirds-name="Footer" style="left:56px;top:1064px;width:682px;height:20px;font-size:11px;color:#575f6d;font-weight:400;line-height:1.2;">{{ footer }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"business_name": "Northline Studio",
"business_address": "12 Quay Street, Auckland",
"business_email": "hello@northline.example",
"client_name": "Harbour Kitchen Supply",
"client_address": "40 Wharf Lane, Wellington",
"quote_number": "Q-2041",
"issued_on": "2026-09-06",
"valid_until": "2026-10-06",
"intro": "Thank you for asking us to quote. This price covers the design work below and two rounds of changes.",
"items": [
{
"description": "Brand refresh: logo, colours, and type",
"quantity": 1,
"unit_price": 3200,
"amount": 3200
},
{
"description": "Campaign image set",
"quantity": 12,
"unit_price": 90,
"amount": 1080
},
{
"description": "Print-ready menu design",
"quantity": 2,
"unit_price": 450,
"amount": 900
}
],
"subtotal": 5180,
"tax_label": "GST 15%",
"tax": 777,
"total": 5957,
"terms": "Half is due to start the work. The rest is due within 14 days of the final files. Prices are in NZD.",
"footer": "Reply to this quote by email to accept it."
}