Layout Base page template

Use the base page template to create pages with the core components and markup required for an ONS service.

The examples below provide templates that consist of commonly used components and patterns.

All template examples contain the following:

CSS and Javascript to add styling and behaviours to components.
a skip to content link, header and footer component.
a favicon, and other related bookmark icons.

Click on the HTML tab on each example to view the rendered HTML.

Default base page template

The example below shows the minimum requirements for an ONS base page template.

Customised page template

Components can be added to the base page template. The example below provides a phase banner, change language, breadcrumbs, save button and footer links.

Census page template

The example below shows a themed census version of the ONS base page template.

Changing template content

The Nunjucks template allows 2 ways to change the content: variables or blocks

The main difference between a variable and a block is that blocks can contain markup.

Variables

Variables can be set with:

<pre class="ons-patternlib-example__pre  language-markup" tabindex="0"><code class="ons-patternlib-example__code ons-  language-markup">{% set variableName = value %}</code></pre>

Variable Name	Type	Required	Description
form	`FormConfig` (ref)	false	A object with configuration to wrap the current page in a form. If `form` variable is not set, the page will not be wrapped in a form
pageConfig	`PageConfig` (ref)	true	A object with configuration for the current page
release_version	string	false	What CDN version to use. This can also be configured from the `page` configuration object

FormConfig

Variable Name	Type	Required	Description
classes	string	false	Classes to apply to the wrapping form
attributes	object	false	HTML attributes (for example, data attributes) to add to the button form
method	string	false	The method the form should you, if not specified it will default to `POST`

PageConfig

Variable Name	Type	Required	Description
cdn	`CDN` (ref)	false	What CDN version to use
assetsURL	string	false	The base url where to find CSS/JS/images etc., for example, `http://localhost:3030`
theme	string	false	The name of the css file, for example, “census” if using a theme. Defaults to “main”.
title	string	true	The contents for the `<title>` element
cspNonce	string	false	The Content Security Policy (CSP) nonce value
headMeta	`HeadMeta` (ref)	false	Configuration for `<meta>` information in the document `<head>`
breadcrumbs	`Breadcrumbs` (ref)	false	Configuration for the breadcrumbs or back link
bodyClasses	string	false	Classes to add to the `<body>` element
header	`PageHeader` (ref)	true	Configuration for the page header
language	`Language` (ref)	false	Language configuration for the page
signoutButton	`Button` (ref)	false	Configuration for the save and sign out button. If not specified, the button will not render
toggleButton	`HeaderToggleButton` (ref)	true (if `navigation` supplied)	Configuration for the mobile navigation toggle button
navigation	`HeaderNavigation` (ref)	true (if `toggleButton` supplied)	Configuration for header navigation links
phase	`PhaseBanner` (ref)	false	Settings for the Phase banner
serviceLinks	`Array<Navigation>` (ref)	false	An array to render the service links list
footer	`PageFooter` (ref)	true	Configuration for the page footer
pageColNumber	string	false	sets the number of grid columns for the page (defaults to 8)
description	string	true	Default description of the current page for search engines if headMeta.description is not provided.
absoluteUrl	string	true	Default URL for the preferred page for search engines to avoid duplicate content penalties. Used if if headMeta.canonicalUrl is not provided.
wide	boolean	false	If sets to true passes sets the `wide` param on both the header and footer which will add css which will make the page use a wider style.

CDN

Variable Name	Type	Required	Description
url	string	false	URL for the CDN
version	string	false	DS version on the CDN

PageHeader

Variable Name	Type	Required	Description
title	string	false	Title for the page header. If not specified this will default to `page.title`
classes	string	false	CSS classes to be added to the header
logo	string	false	URL for the page header logo
logoAlt	string	false	Alt tag for the page header logo
logoHref	string	false	URL for the page header logo. If not specified the image will not be wrapped in a link
titleLogo	string	false	URL for image to use instead of a title string
mobileLogo	string	false	URL for image to use for small screens instead of a title string
titleLogoAlt	string	false (if `titleLogo` not specified)	Alt tag for the title logo
titleLogoHref	string	false	Will wrap the title logo in a link to the specified URL
customHeaderLogo	string	false	Set to ‘true’ to make the masthead taller to accommodate a logo with a taller aspect ratio

HeadMeta

Variable Name	Type	Required	Description
description	string	false	Description of the current page for search engines.
canonicalUrl	string	false	URL for the preferred page for search engines to avoid duplicate content penalties. Defaults to current page url
twitterSite	string	false	@username for the website used in the card, for example `@census2021`
hrefLangs	`HrefLangs` (ref)	false	Metadata for the language links to improve SEO

HrefLangs

Variable Name	Type	Required	Description
url	string	false	URL for the CDN
lang	string	false	DS version on the CDN

PageFooter

Variable Name	Type	Required	Description
OGLLink	`OGLLink` (ref)	false	An object containing settings for the OGL link
footerWarning	`footerWarning` (ref)	false	An object containing settings for the Footer Warning
copyrightDeclaration	`copyrightDeclaration` (ref)	false	An object containing settings for the Copyright Declaration
cols	`Array<FooterCol>` (ref)	false	An array of `FooterCol` objects. Maximum of 3
rows	`Array<FooterRow>` (ref)	false	An array of `FooterRow` objects
poweredBy	boolean \| `PoweredBy` (ref)	false	Whether to show the ONS logo, and optionally settings for the logo
lang	string	false	The current page language. Will change out the ONS logo if `poweredBy` is provided. Defaults to `en`
newTabWarning	string	false	Text for warning of links opening in new tabs
crest	boolean	false	If set to true will add the UK coat of arms to the footer
legal	`Array<LegalRow>`	false	An array of LegalRow objects

Blocks

Blocks can be set with:

{% block blockName %}
    HTML Here
{% endblock %}

To change the components that are included by default, set their equivalent blocks, for example:

{% block header %}
    {{ onsHeader({
        ...
    }) }}
{% endblock %}

Block Name	Description
headIcons	Override the default icons used for ONS branded pages
head	An area to add additional markup to the `<head>` element, for example, extra CSS references
body	Override the entire contents of the `<body>` element
bodyStart	An area to add additional markup after the opening element
skipLink	Override the default skip link
preHeader	An area to add content and markup before the header
header	Override the default header component
page	Override the default content and layout of the page
preMain	Content to place before the main content
main	Main content and markup
footer	Override the default footer component
bodyEnd	Add content just after just before the closing `</body>` element

Exploded view of the base page template block areas

Help improve this layout

Let us know how we could improve this layout or share your user research findings. Discuss ‘Base page template’ on GitHub