Headers and Footers

If you want to insert your company logo, bank account information or page numbers on every page, you probably want to use a header or footer.

The examples you find here can be used for all margin boxes on the page.

Also check out the Paged.js docs on simple headers/footers with pure CSS and complex headers/footers with HTML markup.

#Example 1: Page Number in Footer

This simple footer can be solved with pure CSS.

@page {
	@bottom-center {
		content: "" counter(page);
	}
}

#Example 2: Current Page and Total Pages in Footer

This simple footer can be solved with pure CSS.

@page {
	@bottom-center {
		content: "" counter(page) "/" counter(pages);
	}
}

#Example 3: Logo in Footer

This slightly more complex footer requires some HTML markup as well as CSS.

#HTML (template.ejs)

<div class="footer">
	<img src="./logo.png">
	<p>Thank you for your trust.</p>
</div>

#CSS (styles.css)

.footer {
	/*
	 * The height of the footer should not be greater than the space
	 * in the page margin:
	 */
	height: 20mm;

	/*
	 * Set the position to "running" and use the custom identifier "runningFooter"
	 * (could be anything):
	 */
	position: running(runningFooter);

	/*
	 * Give the footer some styles:
	 */
	display: flex;
	flex-direction: row;
	gap: 2mm;
}
.footer img {
	width: 5mm;
	height: 5mm;
}
.footer p {
	margin: 0;
}

@page {
	/*
	 * Make sure there is enough room for the footer in the page margins:
	 */
	margin: 20mm 11mm;

	/*
	 * Reference the footer and position it at the end of the bottom page margin:
	 */
	@bottom-center {
		content: element(runningFooter);
	}
}