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