FUNBREW PDFFUNBREW PDF
May 12, 2026

Invoice PDF HTML Template Guide | CSS Layout & Design

invoicesHTML templatePDF generationCSSdesign

Once you understand how to call the API from Automate Invoice PDF Generation, the next step is raising the quality of your template design. This guide covers the HTML and CSS patterns for building professional invoice templates — page sizing, table layout, brand colors, multi-page support, and dynamic data binding.

Template Design Foundations

Before writing a single line of CSS, decide these three things:

  1. Page size: A4 portrait (most common worldwide)
  2. Margins: 20mm top/bottom, 15mm left/right is a safe default
  3. Font stack: System fonts with good Unicode coverage, or a web font

Lock Page Settings with @page

@page {
  size: A4 portrait;
  margin: 20mm 15mm;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
}

See the CSS @page Rule PDF Guide for a full breakdown of page-level CSS.

Header Section: Company Info and Invoice Metadata

<header class="invoice-header">
  <div class="company-info">
    <h1 class="company-name">Acme Corporation</h1>
    <p>123 Main Street, Suite 100, New York, NY 10001</p>
    <p>hello@acme.example.com &bull; +1 (555) 000-0000</p>
  </div>
  <div class="invoice-meta">
    <h2 class="invoice-title">Invoice</h2>
    <table class="meta-table">
      <tr><th>Invoice #</th><td>INV-2026-0042</td></tr>
      <tr><th>Issue Date</th><td>May 12, 2026</td></tr>
      <tr><th>Due Date</th><td>June 30, 2026</td></tr>
    </table>
  </div>
</header>

.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0052cc;
  padding-bottom: 12pt;
  margin-bottom: 16pt;
}

.company-name {
  font-size: 14pt;
  font-weight: 700;
  color: #0052cc;
  margin: 0 0 4pt;
}

.invoice-title {
  font-size: 24pt;
  font-weight: 700;
  color: #0052cc;
  margin: 0 0 8pt;
  text-align: right;
}

.meta-table {
  margin-left: auto;
  border-collapse: collapse;
  font-size: 9pt;
}

.meta-table th {
  text-align: right;
  padding: 2pt 8pt 2pt 0;
  color: #555;
  font-weight: normal;
}

.meta-table td {
  text-align: left;
  font-weight: 600;
}

Bill-To Section

<section class="bill-to">
  <p class="bill-to-label">Bill To</p>
  <p class="client-name">{{client_name}}</p>
  <p>{{client_address}}</p>
  <p>Attention: {{contact_name}}</p>
</section>

.bill-to {
  background: #f5f7fa;
  border-left: 4px solid #0052cc;
  padding: 10pt 12pt;
  margin-bottom: 20pt;
}

.bill-to-label {
  font-size: 8pt;
  color: #777;
  margin: 0 0 4pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.client-name {
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 4pt;
}

Line Items Table

The line items table is the heart of the invoice. Aim for clear column widths, right-aligned amounts, and striped rows for readability.

<table class="line-items">
  <thead>
    <tr>
      <th class="col-no">#</th>
      <th class="col-desc">Description</th>
      <th class="col-qty">Qty</th>
      <th class="col-price">Unit Price</th>
      <th class="col-amount">Amount</th>
    </tr>
  </thead>
  <tbody>
    {{#each items}}
    <tr>
      <td class="col-no">{{@index_plus_1}}</td>
      <td class="col-desc">{{description}}</td>
      <td class="col-qty text-right">{{quantity}}</td>
      <td class="col-price text-right">{{unit_price_formatted}}</td>
      <td class="col-amount text-right">{{amount_formatted}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

.line-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16pt;
  font-size: 9pt;
}

.line-items thead tr {
  background-color: #0052cc;
  color: #ffffff;
}

.line-items thead th {
  padding: 6pt 8pt;
  text-align: center;
  font-weight: 600;
}

.line-items tbody tr:nth-child(even) {
  background-color: #f0f4ff;
}

.line-items tbody td {
  padding: 5pt 8pt;
  border-bottom: 1px solid #e0e7ff;
  vertical-align: middle;
}

/* Column widths */
.col-no     { width: 5%; }
.col-desc   { width: 50%; }
.col-qty    { width: 8%; }
.col-price  { width: 17%; }
.col-amount { width: 17%; }

.text-right  { text-align: right; }
.text-center { text-align: center; }

For deeper CSS guidance on table output, see the HTML to PDF Table Layout Guide.

Totals Section

<div class="totals-wrapper">
  <table class="total-table">
    <tr>
      <th>Subtotal</th>
      <td class="amount">{{subtotal_formatted}}</td>
    </tr>
    <tr>
      <th>Tax ({{tax_rate}}%)</th>
      <td class="amount">{{tax_amount_formatted}}</td>
    </tr>
    <tr class="grand-total-row">
      <th>Total Due</th>
      <td class="amount total">{{grand_total_formatted}}</td>
    </tr>
  </table>
</div>

.totals-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20pt;
}

.total-table {
  border-collapse: collapse;
  font-size: 9pt;
}

.total-table th {
  text-align: left;
  background: #f5f7fa;
  padding: 4pt 10pt;
  border: 1px solid #ddd;
  min-width: 120pt;
  font-weight: normal;
}

.total-table .amount {
  text-align: right;
  padding: 4pt 10pt;
  border: 1px solid #ddd;
  min-width: 90pt;
}

.grand-total-row th,
.grand-total-row td {
  background-color: #0052cc;
  color: #ffffff;
  font-size: 11pt;
  font-weight: 700;
}

.grand-total-row .amount.total {
  font-size: 13pt;
}

Payment and Notes Section

<section class="notes-section">
  <div class="payment-info">
    <h3>Payment Details</h3>
    <p>Bank: First National Bank</p>
    <p>Account: 123-456789 &bull; Routing: 021000021</p>
    <p>Payable to: Acme Corporation</p>
  </div>
  {{#if notes}}
  <div class="custom-notes">
    <h3>Notes</h3>
    <p>{{notes}}</p>
  </div>
  {{/if}}
</section>

.notes-section {
  display: flex;
  gap: 20pt;
  font-size: 9pt;
  border-top: 1px solid #ddd;
  padding-top: 12pt;
}

.notes-section h3 {
  font-size: 9pt;
  font-weight: 700;
  margin: 0 0 6pt;
  color: #333;
}

Multi-Page Support: Repeating Headers and Page Numbers

When line items span multiple pages, keep column headers visible on every page and add page numbers.

/* Repeat thead on every page */
.line-items thead {
  display: table-header-group;
}

/* Page counter in the footer */
@page {
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 8pt;
    color: #aaa;
  }
}

/* Prevent table rows from splitting across pages */
.line-items tbody tr {
  page-break-inside: avoid;
}

Sending to the PDF API

Once your template is ready, inject dynamic data and send it to the API.

const fs = require('fs');
const Handlebars = require('handlebars');

const templateSource = fs.readFileSync('invoice-template.html', 'utf-8');
const template = Handlebars.compile(templateSource);

async function generateInvoicePdf(invoiceData) {
  const html = template(invoiceData);

  const response = await fetch('https://pdf.funbrew.cloud/api/v1/pdf', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.FUNBREW_PDF_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      html,
      filename: `invoice-${invoiceData.invoiceNumber}.pdf`,
      options: {
        format: 'A4',
        margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' },
        print_background: true,
      },
      metadata: {
        invoice_number: invoiceData.invoiceNumber,
        customer_id: invoiceData.customerId,
      },
    }),
  });

  return response.json();
}

Paste your HTML into the Playground to preview the output before integrating with the API.

Template Design Checklist

  • @page sets A4 size and margins
  • background-color and other visual styles are captured with print_background: true
  • Amount columns are right-aligned
  • thead has display: table-header-group for multi-page repeating headers
  • page-break-inside: avoid prevents rows from splitting mid-row
  • Monospace font used for numeric columns for precise alignment
  • Tax rate and subtotal are clearly separated from the total

Summary

Key design decisions for invoice HTML templates:

  • Fix the page with @page: ensures consistent A4 output across all PDF engines
  • Right-align amounts and use monospace: improves scanning speed for accountants
  • Stripe rows and use thead repeat: readability across many line items
  • Avoid mid-row page breaks: prevents awkward splits in multi-page invoices

When your template is polished, proceed to Automate Invoice PDF Generation for monthly batch processing and email delivery automation. Check the API Documentation for all supported options. Add webhook callbacks to get notified when each PDF is ready.

Related

Back to all posts
Powered by FUNBREW PDF