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
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
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