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.
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
<!--<![endif]-->
{# For Internet Explorer 8, you need to compile specific stylesheet #}
{# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
<!--[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
<![endif]-->
{# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
{% endblock %}
{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
{% endblock %}
{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
Customised page template
You can customise the page template, for example, by:
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#customised-page-template-example-nunjucks" aria-controls="customised-page-template-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="customised-page-template-example-nunjucks" role="tabpanel"><div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{# Example that changes every setting in the template #}
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
{% from "govuk/components/header/macro.njk" import govukHeader %}
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
{% set themeColor = "blue" %}
{% set bodyClasses = "app-body-class" %}
{% set bodyAttributes = {
'data-test': 'My value',
'data-other': 'report:details'
} %}
{% set containerClasses = "app-width-container" %}
{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
{% block headIcons %}
{{ super() }}
{% endblock %}
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/all.css" rel="stylesheet">
<!--<![endif]-->
{# For Internet Explorer 8, you need to compile specific stylesheet #}
{# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
<!--[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
<![endif]-->
{# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
{% endblock %}
{% block bodyStart %}
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
headingText: "Cookies on [name of service]",
html: "<p class="govuk-body">We use some essential cookies to make this service work.</p>
<p class="govuk-body">We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>",
actions: [
{
text: "Accept analytics cookies",
type: "button",
name: "cookies",
value: "accept"
},
{
text: "Reject analytics cookies",
type: "button",
name: "cookies",
value: "reject"
},
{
text: "View cookies",
href: "#"
}
]
}
]
}) }}
{% endblock %}
{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
{% endblock %}
{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
serviceName: "Service name",
serviceUrl: "#",
navigation: [
{
href: "#1",
text: "Navigation item 1",
active: true
},
{
href: "#2",
text: "Navigation item 2"
},
{
href: "#3",
text: "Navigation item 3"
}
]
}) }}
{% endblock %}
{% set mainClasses = "app-main-class" %}
{% block main %}
{{ super() }}
{% endblock %}
{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
},
html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
}) }}
{{ govukBackLink({
href: "#",
text: "Back"
}) }}
{% endblock %}
{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
{% endblock %}
{% block footer %}
{{ govukFooter({
meta: {
items: [
{
href: "#1",
text: "Help"
},
{
href: "#2",
text: "Cookies"
},
{
href: "#3",
text: "Contact"
},
{
href: "#4",
text: "Terms and conditions"
}
]
}
}) }}
{% endblock %}
{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
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" %}
By default, the template contains a skip link, header and footer, all of which require 'blocks' to change.
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:
Set the domain for assets where an absolute URL is required, for example the Open Graph image.
beforeContent
Block
Add content that needs to appear outside <main> element.
For example: The back link component, breadcrumbs 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.
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.
opengraphImageUrl
Variable
Set the URL for the Open Graph image meta tag. The URL must be absolute, including the protocol and domain name.
pageTitle
Block
Override the default page title (<title> element).
pageTitleLang
Variable
Set the language of the <title> element if it's different to htmlLang.
<div class="app-example ">
<div class="app-example__toolbar">
<a href="/styles/page-template/block-areas/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">block areas – page template</span>
example in a new tab
</a>
</div>
<iframe title="Block areas – Page template example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/page-template/block-areas/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
Help improve this style
If you spot a problem with this guidance you can
propose a change.