Quote and estimate HTML template
A clean A4 quote (estimate) template in HTML with scope, line items, an optional extra, discount, payment terms and an acceptance line. Convert it to PDF in one call.
Paper: A4 · preview scaled to fit
Render it with the API
curl https://html-pdf.com/v1/pdf \
-H "Authorization: Bearer $HTML_PDF_KEY" \
-F "index.html=@quote.html" \
-F 'options={"prefer_css_page_size": true}' \
-o quote.pdfOr ask your AI agent: "Make me a quote PDF using the html-pdf.com quote template." · Guides · API reference
Tips
- The optional line is shown but left out of the total, so clients can see upsells without confusion.
- Generate it from your CRM or a form, then send the same data to the invoice template once it's accepted.
- Need a one-off quote without code? Use the free quote generator.
HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quote Q-2026-017</title>
<style>
@page { size: A4; margin: 18mm; }
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 12px; line-height: 1.5; margin: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; }
.brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; }
.muted { color: #666; }
.valid { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px solid #111; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.parties { display: flex; gap: 48px; margin-bottom: 28px; }
.parties div { flex: 1; }
.label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 4px; }
.scope { margin-bottom: 24px; max-width: 150mm; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; text-align: left; padding: 8px 0; border-bottom: 1px solid #111; }
td { padding: 10px 0; border-bottom: 1px solid #eee; vertical-align: top; }
.r { text-align: right; }
tr { break-inside: avoid; }
.opt td { color: #666; }
.tag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; border: 1px solid #bbb; padding: 0 5px; margin-left: 6px; color: #666; }
.totals { width: 260px; margin: 16px 0 0 auto; break-inside: avoid; }
.totals td { border: 0; padding: 4px 0; }
.totals .grand td { border-top: 1px solid #111; padding-top: 10px; font-size: 16px; font-weight: 700; }
.terms { margin-top: 36px; display: flex; gap: 32px; break-inside: avoid; }
.terms div { flex: 1; }
.terms ul { margin: 0; padding-left: 16px; }
.accept { margin-top: 40px; display: flex; gap: 32px; break-inside: avoid; }
.accept div { flex: 1; border-top: 1px solid #111; padding-top: 6px; font-size: 10px; color: #666; height: 48px; }
@media screen {
html { background: #e9e9e7; }
body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 18mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
}
</style>
</head>
<body>
<div class="top">
<div class="brand">Your Company</div>
<div class="r">
<h1>Quote</h1>
<div class="muted">Q-2026-017</div>
<div class="valid">Valid until November 9, 2026</div>
</div>
</div>
<div class="parties">
<div><div class="label">From</div><strong>Your Company S.L.</strong><br>Carrer de Example 1<br>08001 Barcelona, Spain<br>hello@yourcompany.example</div>
<div><div class="label">Prepared for</div><strong>Acme Inc.</strong><br>Jordan Example, Head of Marketing<br>500 Market Street<br>San Francisco, CA 94105</div>
<div class="r"><div class="label">Date</div>October 10, 2026<div class="label" style="margin-top:10px">Project start</div>November 2026</div>
</div>
<div class="scope"><div class="label">Scope</div>Redesign of the marketing site (home, pricing, two landing pages) with a reusable component library, plus a month of support after launch.</div>
<table>
<thead><tr><th>Item</th><th class="r">Qty</th><th class="r">Rate</th><th class="r">Amount</th></tr></thead>
<tbody>
<tr><td>Discovery workshop<br><span class="muted">Goals, audience, content audit</span></td><td class="r">1</td><td class="r">$800.00</td><td class="r">$800.00</td></tr>
<tr><td>Design<br><span class="muted">4 pages, desktop and mobile</span></td><td class="r">4</td><td class="r">$650.00</td><td class="r">$2,600.00</td></tr>
<tr><td>Development<br><span class="muted">Component library and CMS setup</span></td><td class="r">40 h</td><td class="r">$95.00</td><td class="r">$3,800.00</td></tr>
<tr><td>Post-launch support<br><span class="muted">30 days, fixes and small changes</span></td><td class="r">1</td><td class="r">$600.00</td><td class="r">$600.00</td></tr>
<tr class="opt"><td>Copywriting<span class="tag">optional</span><br><span class="muted">Not included in the total</span></td><td class="r">4</td><td class="r">$300.00</td><td class="r">$1,200.00</td></tr>
</tbody>
</table>
<table class="totals">
<tr><td class="muted">Subtotal</td><td class="r">$7,800.00</td></tr>
<tr><td class="muted">Discount (5%)</td><td class="r">−$390.00</td></tr>
<tr class="grand"><td>Total</td><td class="r">$7,410.00</td></tr>
</table>
<div class="terms">
<div><div class="label">Payment terms</div><ul><li>40% on acceptance</li><li>40% at design sign-off</li><li>20% on launch</li></ul></div>
<div><div class="label">Notes</div>Prices exclude VAT. Hours beyond the estimate are billed at the same rate after written approval.</div>
</div>
<div class="accept">
<div>Accepted by (name and signature)</div>
<div>Date</div>
</div>
</body>
</html>
More templates
Invoice · Receipt · Certificate · Report · Resume · Proposal · Packing slip · Shipping label · Event ticket · Purchase order · Timesheet · all templates