We use cookies
We use cookies to enhance your experience and analyse site usage.
Minimal, modern invoice with line items table, tax, and total. Light blue accent.
<!DOCTYPE html>
<html>
<head>
<style>
:root { --accent: #2563eb; --muted: #64748b; --border: #e2e8f0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; color: #1e293b; padding: 48px; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 48px; }
.logo { font-size: 22px; font-weight: 700; color: var(--accent); }
.invoice-label { text-align: right; }
.invoice-label h1 { font-size: 28px; font-weight: 800; color: #1e293b; }
.invoice-label p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.meta-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 6px; }
.meta-group p { font-size: 14px; color: #1e293b; line-height: 1.6; }
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
thead { background: #f8fafc; }
th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
th:last-child, td:last-child { text-align: right; }
td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.totals { width: 260px; margin-left: auto; }
.totals .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--muted); }
.totals .total { border-top: 2px solid var(--border); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 16px; color: var(--accent); display: flex; justify-content: space-between; }
.footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); text-align: center; }
</style>
</head>
<body>
<div class="header">
<div>
<div class="logo">{{company_name}}</div>
<p style="color:#64748b;font-size:13px;margin-top:6px;">{{company_address}}</p>
</div>
<div class="invoice-label">
<h1>Invoice</h1>
<p>#{{invoice_number}}</p>
<p>Issued: {{issue_date}}</p>
<p>Due: {{due_date}}</p>
</div>
</div>
<div class="meta">
<div class="meta-group"><label>Bill To</label><p>{{client_name}}<br>{{client_address}}<br>{{client_email}}</p></div>
<div class="meta-group"><label>Payment</label><p>{{payment_terms}}<br>{{bank_details}}</p></div>
</div>
<table>
<thead><tr><th>Description</th><th>Qty</th><th>Unit Price</th><th>Amount</th></tr></thead>
<tbody>{{items}}</tbody>
</table>
<div class="totals">
<div class="row"><span>Subtotal</span><span>{{subtotal}}</span></div>
<div class="row"><span>Tax ({{tax_rate}}%)</span><span>{{tax}}</span></div>
<div class="total"><span>Total Due</span><span>{{total}}</span></div>
</div>
<div class="footer">{{footer_note}}</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n :root { --accent: #2563eb; --muted: #647...",
"format": "A4"
}' \
--output clean-invoice.pdf