Headers & footers

Add a header.<ext> and/or footer.<ext> file to a template to render a running page header and footer on every page.

invoice/
  template.handlebars
  header.html
  footer.html

Headers and footers use the same engines as the body, resolved independently by file extension.

Behavior

  • If only one of header/footer exists, the missing one falls back to a default (non-empty) template.
  • Header and footer templates do not have access to the template’s assets/.
  • The browser only shows header/footer margins if a header or footer is present; size the top/bottom margins accordingly.

The browser exposes special classes you can use inside header/footer markup for page metadata, for example page numbers:

<!-- footer.html -->
<div style="font-size:10px; width:100%; text-align:center;">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

Available classes include pageNumber, totalPages, date, title, and url.

Example

See the footer_template example in the Gallery, which ships a footer.html and lets the header fall back to the default.