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’re 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 in a new tab

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 container to include a back link or phase banner.

Open this customised – page template example in a new tab

Changing template content

If you’re using Nunjucks, you can change the template’s content using options.

How you set an option depends on whether it’s a ‘variable’ option or a ‘block’ option.

To set a ‘variable’ option, use set to pass in a single value or string. For example, to add a class to the <body> element using the bodyClasses option:

{% set bodyClasses = "EXAMPLE-CLASS" %}

To set a ‘block’ option, use block to pass in a multiline value or HTML markup. For example, to add a block of HTML before the closing element in the page template using the bodyEnd option:

{% block bodyEnd %}
  <div>
     <p>Example text</p>
  </div>
{% endblock %}

To change the components that are included in the page template by default, set their equivalent blocks. For example:

{% block header %}
  {{ govukHeader ({
    homepageUrl: "/custom-url"
  }) }}
{% endblock %}

Options

Options that you can use with the page template
Option name Option type Description
assetPath Variable Specify a path to the GOV.UK Frontend assets (icons, images, font files).
assetUrl Variable Set the domain for the Open Graph meta tag image asset. If you need to use both your own domain and your own image path and filename, add <meta property="og:image" content="YOUR-ABSOLUTE-URL"> inside the head block instead of using `assetUrl`.
beforeContent Block Add content that needs to appear outside <main> element.
For example: The back link component, phase banner component.
bodyAttributes Variable Add attributes to the <body> element. Add each attribute and its value in the bodyAttributes object.
bodyClasses Variable Add a class to the <body> element.
bodyEnd Block Add content just before the closing </body> element.
bodyStart Block Add content after the opening <body> element.
For example: The cookie banner component.
containerClasses Variable Add a class to the container. This is useful if you want to make the page wrapper a fixed width.
content Block Add content that needs to appear centered in the <main> element.
cspNonce Variable Add a nonce attribute to the script for your Content Security Policy (CSP). Provide a nonce that hostile actors cannot guess, as otherwise they can easily find a way around your CSP. However, you should use this attribute only if you’re not able to include the hash for the inline scripts in your service’s CSP.
footer Block Override the default footer component.
head Block Add additional items inside the <head> element.
For example: <meta name="description" content="My page description">
header Block Override the default header component.
headIcons Block Override the default icons used for GOV.UK branded pages.
For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
htmlClasses Variable Add a class to the <html> element.
htmlLang Variable Set the language of the whole document. If your <title> and <main> element are in a different language to the rest of the page, use htmlLang to set the language of the rest of the page.
main Block Override the main section of the page, which by default wraps the <main> element, beforeContent block and content block.
mainClasses Variable Add a class to the <main> element.
mainLang Variable Set the language of the <main> element if it's different to htmlLang.
pageTitle Block Override the default page title (<title> element).
pageTitleLang Variable Set the language of the <title> element if it's different to htmlLang.
skipLink Block Override the default skip link component.
themeColor Variable Set the toolbar colour on some devices.

Exploded view of the page template block areas

Open this block areas – page template example in a new tab

Help improve this page

If you spot a problem with this 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, contact the team.