Delete
Preview
Save Changes
Paper
A5
A4
A3
Letter
Legal
Receipt58
Receipt80
Orientation
Portrait
Landscape
Variables:
company_name
company_address
invoice_number
customer_name
customer_email
issue_date
due_date
description
quantity
unit_price
amount
subtotal
tax
total
HTML
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: #1e293b; margin: 0; padding: 48px; } .head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #4f46e5; padding-bottom: 24px; } .brand { font-size: 26px; font-weight: 800; color: #4f46e5; } h1 { font-size: 34px; margin: 0; letter-spacing: 2px; color: #0f172a; } .muted { color: #64748b; font-size: 13px; } .meta { margin-top: 28px; display: flex; justify-content: space-between; } table { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 14px; } th { text-align: left; background: #f1f5f9; padding: 12px; color: #475569; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; } td { padding: 12px; border-bottom: 1px solid #e2e8f0; } .right { text-align: right; } .total { margin-top: 24px; float: right; width: 280px; } .total .row { display: flex; justify-content: space-between; padding: 8px 0; } .total .grand { border-top: 2px solid #0f172a; font-weight: 800; font-size: 18px; margin-top: 8px; padding-top: 12px; } </style> </head> <body> <div class="head"> <div> <div class="brand">{{company_name}}</div> <div class="muted">{{company_address}}</div> </div> <div style="text-align:right"> <h1>INVOICE</h1> <div class="muted">#{{invoice_number}}</div> </div> </div> <div class="meta"> <div> <div class="muted">BILL TO</div> <strong>{{customer_name}}</strong><br/> <span class="muted">{{customer_email}}</span> </div> <div style="text-align:right"> <div class="muted">Issued: {{issue_date}}</div> <div class="muted">Due: {{due_date}}</div> </div> </div> <table> <thead><tr><th>Description</th><th class="right">Qty</th><th class="right">Price</th><th class="right">Amount</th></tr></thead> <tbody> {{#each items}} <tr><td>{{description}}</td><td class="right">{{quantity}}</td><td class="right">{{unit_price}}</td><td class="right">{{amount}}</td></tr> {{/each}} </tbody> </table> <div class="total"> <div class="row"><span class="muted">Subtotal</span><span>{{subtotal}}</span></div> {{#if tax}}<div class="row"><span class="muted">Tax</span><span>{{tax}}</span></div>{{/if}} <div class="row grand"><span>Total</span><span>{{total}}</span></div> </div> </body> </html>
PDF Preview
Click
Preview
to render the template to PDF.