# 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

Render it:

```bash
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.pdf
```

```html
<!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>

```
