# Receipt HTML template (80 mm thermal)

An 80 mm thermal-printer style receipt in HTML and CSS. Convert it to a narrow PDF for email receipts or point-of-sale printing.

Paper: 80 × 200 mm

Render it:

```bash
curl https://html-pdf.com/v1/pdf -H "Authorization: Bearer $HTML_PDF_KEY" -F "index.html=@receipt.html" -F 'options={"prefer_css_page_size":true}' -o receipt.pdf
```

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Receipt #1042</title>
<style>
  @page { size: 80mm 200mm; margin: 6mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #111; margin: 0; }
  .c { text-align: center; }
  h1 { font-size: 15px; margin: 0; }
  hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
  table { width: 100%; border-collapse: collapse; }
  td { padding: 2px 0; vertical-align: top; }
  .r { text-align: right; }
  .total td { font-size: 14px; font-weight: 700; padding-top: 6px; }
  .muted { color: #666; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 80mm; min-height: 200mm; margin: 24px auto; padding: 6mm; 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="c">
    <h1>CAFÉ EXAMPLE</h1>
    <div class="muted">Carrer de Example 1, Barcelona<br>NIF B12345678</div>
  </div>
  <hr>
  <div>Receipt #1042<br>10/10/2026 · 09:41</div>
  <hr>
  <table>
    <tr><td>2 × Flat white</td><td class="r">7.00</td></tr>
    <tr><td>1 × Croissant</td><td class="r">2.50</td></tr>
    <tr><td>1 × Orange juice</td><td class="r">3.80</td></tr>
  </table>
  <hr>
  <table>
    <tr><td class="muted">Subtotal</td><td class="r">12.09</td></tr>
    <tr><td class="muted">VAT 10%</td><td class="r">1.21</td></tr>
    <tr class="total"><td>TOTAL €</td><td class="r">13.30</td></tr>
    <tr><td class="muted">Card •••• 4242</td><td class="r">13.30</td></tr>
  </table>
  <hr>
  <div class="c">Thank you!<br><span class="muted">example.com</span></div>
</body>
</html>

```
