Styles

Page template

Use this template to keep your pages consistent with the rest of GOV.UK.

This page template combines the boilerplate markup and components needed for a basic GOV.UK page. It includes:

  • JavaScript that adds a .js-enabled class, which is required by components with JavaScript behaviour
  • the skip link, header and footer components
  • the favicon, and other related theme icons

In the examples provided, we show both HTML and Nunjucks.

You can use the HTML examples if you are not able to use Nunjucks. If you use HTML you’ll need to update it manually when new versions are released.

If you are using Nunjucks you can get this page template by installing GOV.UK Frontend. You’ll get updates to the page template when we update GOV.UK Frontend.

Default

This example shows the minimum required for a GOV.UK page.

Open this "Default – Page template example" example in a new window

Customised page template

You can customise the page template, for example, by adding a service name and navigation or adding a block before the main contain to include a back link or phase banner.

Open this "Customised – Page template example" example in a new window

Nunjucks

Configuring Nunjucks

When using Nunjucks you’ll need to add node_modules/govuk-frontend/ and node_modules/govuk-frontend/components/ as available views:

nunjucks.configure([
  "node_modules/govuk-frontend/",
  "node_modules/govuk-frontend/components/"
], {
  autoescape: true
})

See the Nunjucks getting started guide for more information.

Once you have configured Nunjucks, you can now extend template.njk in your view:

{% extends "template.njk" %}

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:

{% set variableName = "value" %}
Variables that can be used with Template
Variable name Description
htmlLang Set the language of the document.
htmlClasses Add a class to the <html> element.
themeColor Set the toolbar colour on some devices
bodyClasses Add a class to the <body> element.
mainClasses Add a class to the <main> element.
assetPath Specify a path to the GOV.UK Frontend assets (icons, images, font files).
assetUrl Specify an absolute URL for the <meta property="og:image"> tag image asset.

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 %}
  {{ header({
    homepageUrl: "/custom-url"
  }) }}
{% endblock %}
Blocks that can be used with Template
Block name Description
pageTitle Override the default page title (<title> element).
headIcons Override the default icons used for GOV.UK branded pages.
For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
head Add additional items inside the <head> element.
For example: <meta name="description" content="My page description">
bodyStart Add content after the opening <body> element
skipLink Override the default skip link component.
header Override the default header component.
main Override the main section of the page, which by default wraps the <main> element, beforeContent block and content block.
beforeContent Add content that needs to appear outside <main> element.
For example: The back link component, phase banner component.
content Add content that needs to appear centered in the <main> element.
footer Override the default footer component.
bodyEnd Add content just before the closing </body> element

Exploded view of the page template block areas

Open this "Block areas – Page template example" example in a new window

Help improve this page

If you spot a problem with the Page template guidance you can propose a change.

If you're not sure how to do this, read guidance on how to propose changes in GitHub.

Need help?

If you’ve got a question about the GOV.UK Design System you can contact the team: