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
.govuk-frontend-supportedclass, 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.
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
</head>
<body class="govuk-template__body">
<script>
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-header" role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152 30"
height="30"
width="152"
aria-label="GOV.UK">
<title>GOV.UK</title>
<path d="M6.7 12.2c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m-4.3 2.5c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.5 1 0 2.1 1 2.5m-1.3 4.8c1 .4 2.1-.1 2.5-1 .4-1-.1-2.1-1-2.5-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m10.4-5.8c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1s0 2.1 1 2.5m17.4-1.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m4.3 2.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m1.3 4.8c-1 .4-2.1-.1-2.5-1-.4-1 .1-2.1 1-2.5 1-.4 2.1.1 2.5 1 .4 1 0 2.1-1 2.5m-10.4-5.8c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1s0 2.1-1 2.5m-5.3-4.9 2.4 1.3V6.5l-2.4.8c-.1-.1-.1-.2-.2-.2s1-3 1-3h-3.4l1 3c-.1.1-.2.1-.2.2-.1.1-2.4-.7-2.4-.7v3.5L17 8.8c-.1.1 0 .2.1.3l-1.4 4.2c-.1.2-.1.4-.1.7 0 1.1.8 2.1 1.9 2.2h.6C19.2 16 20 15.1 20 14c0-.2 0-.4-.1-.7l-1.4-4.2c.2-.1.3-.2.3-.3m-1 20.3c4.6 0 8.9.3 12.8.9 1.1-4.6 2.4-7.2 3.8-9.1l-2.6-.9c.3 1.3.3 1.9 0 2.8-.4-.4-.8-1.2-1.1-2.4l-1.2 4.2c.8-.5 1.4-.9 2-.9-1.2 2.6-2.7 3.2-3.6 3-1.2-.2-1.7-1.3-1.5-2.2.3-1.3 1.6-1.6 2.2-.1 1.2-2.4-.8-3.1-2.1-2.4 1.9-1.9 2.2-3.6.6-5.7-2.2 1.7-2.2 3.3-1.2 5.6-1.3-1.5-3.3-.7-2.5 1.7.9-1.4 2.1-.5 2 .8-.2 1.2-1.7 2.1-3.7 2-2.8-.2-3-2.2-3-3.7.7-.1 1.9.5 3 2l.4-4.4c-1.1 1.2-2.2 1.4-3.3 1.4.4-1.2 2.1-3.1 2.1-3.1h-5.5s1.8 2 2.1 3.1c-1.1 0-2.2-.3-3.3-1.4l.4 4.4c1.1-1.5 2.3-2.1 3-2-.1 1.6-.2 3.5-3 3.7-1.9.2-3.5-.8-3.7-2-.2-1.3 1-2.2 1.9-.8.7-2.4-1.3-3.1-2.6-1.7 1-2.3 1-4-1.2-5.6-1.6 2.1-1.3 3.8.6 5.7-1.3-.7-3.2 0-2.1 2.4.6-1.5 1.9-1.1 2.2.1.2.9-.4 1.9-1.5 2.2-1 .2-2.5-.5-3.7-3 .7 0 1.3.4 2 .9L5 20.4c-.3 1.2-.7 1.9-1.2 2.4-.3-.8-.2-1.5 0-2.8l-2.6.9C2.7 22.8 4 25.4 5.1 30c3.8-.5 8.2-.9 12.7-.9m30.5-11.5c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H59v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zm36.4-4.3c-.4-1.3-1.1-2.4-2-3.4-.9-1-1.9-1.7-3.1-2.3-1.2-.6-2.6-.8-4.2-.8s-2.9.3-4.2.8c-1.1.6-2.2 1.4-3 2.3-.9 1-1.5 2.1-2 3.4-.4 1.3-.7 2.7-.7 4.2s.2 2.9.7 4.2c.4 1.3 1.1 2.4 2 3.4.9 1 1.9 1.7 3.1 2.3 1.2.6 2.6.8 4.2.8 1.5 0 2.9-.3 4.2-.8 1.2-.6 2.3-1.3 3.1-2.3.9-1 1.5-2.1 2-3.4.4-1.3.7-2.7.7-4.2-.1-1.5-.3-2.9-.8-4.2zM81 17.6c0 1-.1 1.9-.4 2.7-.2.8-.6 1.6-1.1 2.2-.5.6-1.1 1.1-1.7 1.4-.7.3-1.5.5-2.4.5-.9 0-1.7-.2-2.4-.5s-1.3-.8-1.7-1.4c-.5-.6-.8-1.3-1.1-2.2-.2-.8-.4-1.7-.4-2.7v-.1c0-1 .1-1.9.4-2.7.2-.8.6-1.6 1.1-2.2.5-.6 1.1-1.1 1.7-1.4.7-.3 1.5-.5 2.4-.5.9 0 1.7.2 2.4.5s1.3.8 1.7 1.4c.5.6.8 1.3 1.1 2.2.2.8.4 1.7.4 2.7v.1zM92.9 28 87 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L152 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
</a>
</div>
</div>
</header>
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
</div>
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41">
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import {
initAll
} from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
</body>
</html>{% block head %}
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
{% 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 type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
{% endblock %}Customised page template
You can customise the page template, for example, by:
- adding a service name and navigation
- including a back link or phase banner
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="blue">
<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="blue">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
<meta property="og:image" content="YOUR-DOMAIN/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body app-body-class" data-test="My value" data-other="report:details">
<script>
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
</script>
<form action="/form-handler" method="post" novalidate>
<div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on [name of service]">
<div class="govuk-cookie-banner__message govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
<div class="govuk-cookie-banner__content">
<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>
</div>
</div>
</div>
<div class="govuk-button-group">
<button value="yes" type="submit" name="cookies[analytics]" class="govuk-button" data-module="govuk-button">
Accept analytics cookies
</button>
<button value="no" type="submit" name="cookies[analytics]" class="govuk-button" data-module="govuk-button">
Reject analytics cookies
</button>
<a class="govuk-link" href="#">View cookies</a>
</div>
</div>
</div>
</form>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-header" role="banner" data-module="govuk-header">
<div class="govuk-header__container app-width-container">
<div class="govuk-header__logo">
<a href="#" class="govuk-header__link govuk-header__link--homepage">
<svg
focusable="false"
role="img"
class="govuk-header__logotype"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152 30"
height="30"
width="152"
aria-label="GOV.UK">
<title>GOV.UK</title>
<path d="M6.7 12.2c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m-4.3 2.5c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1-.5 1 0 2.1 1 2.5m-1.3 4.8c1 .4 2.1-.1 2.5-1 .4-1-.1-2.1-1-2.5-1-.4-2.1.1-2.5 1-.4 1 0 2.1 1 2.5m10.4-5.8c1 .4 2.1-.1 2.5-1s-.1-2.1-1-2.5c-1-.4-2.1.1-2.5 1s0 2.1 1 2.5m17.4-1.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m4.3 2.5c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1 .5 1 0 2.1-1 2.5m1.3 4.8c-1 .4-2.1-.1-2.5-1-.4-1 .1-2.1 1-2.5 1-.4 2.1.1 2.5 1 .4 1 0 2.1-1 2.5m-10.4-5.8c-1 .4-2.1-.1-2.5-1s.1-2.1 1-2.5c1-.4 2.1.1 2.5 1s0 2.1-1 2.5m-5.3-4.9 2.4 1.3V6.5l-2.4.8c-.1-.1-.1-.2-.2-.2s1-3 1-3h-3.4l1 3c-.1.1-.2.1-.2.2-.1.1-2.4-.7-2.4-.7v3.5L17 8.8c-.1.1 0 .2.1.3l-1.4 4.2c-.1.2-.1.4-.1.7 0 1.1.8 2.1 1.9 2.2h.6C19.2 16 20 15.1 20 14c0-.2 0-.4-.1-.7l-1.4-4.2c.2-.1.3-.2.3-.3m-1 20.3c4.6 0 8.9.3 12.8.9 1.1-4.6 2.4-7.2 3.8-9.1l-2.6-.9c.3 1.3.3 1.9 0 2.8-.4-.4-.8-1.2-1.1-2.4l-1.2 4.2c.8-.5 1.4-.9 2-.9-1.2 2.6-2.7 3.2-3.6 3-1.2-.2-1.7-1.3-1.5-2.2.3-1.3 1.6-1.6 2.2-.1 1.2-2.4-.8-3.1-2.1-2.4 1.9-1.9 2.2-3.6.6-5.7-2.2 1.7-2.2 3.3-1.2 5.6-1.3-1.5-3.3-.7-2.5 1.7.9-1.4 2.1-.5 2 .8-.2 1.2-1.7 2.1-3.7 2-2.8-.2-3-2.2-3-3.7.7-.1 1.9.5 3 2l.4-4.4c-1.1 1.2-2.2 1.4-3.3 1.4.4-1.2 2.1-3.1 2.1-3.1h-5.5s1.8 2 2.1 3.1c-1.1 0-2.2-.3-3.3-1.4l.4 4.4c1.1-1.5 2.3-2.1 3-2-.1 1.6-.2 3.5-3 3.7-1.9.2-3.5-.8-3.7-2-.2-1.3 1-2.2 1.9-.8.7-2.4-1.3-3.1-2.6-1.7 1-2.3 1-4-1.2-5.6-1.6 2.1-1.3 3.8.6 5.7-1.3-.7-3.2 0-2.1 2.4.6-1.5 1.9-1.1 2.2.1.2.9-.4 1.9-1.5 2.2-1 .2-2.5-.5-3.7-3 .7 0 1.3.4 2 .9L5 20.4c-.3 1.2-.7 1.9-1.2 2.4-.3-.8-.2-1.5 0-2.8l-2.6.9C2.7 22.8 4 25.4 5.1 30c3.8-.5 8.2-.9 12.7-.9m30.5-11.5c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H59v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zm36.4-4.3c-.4-1.3-1.1-2.4-2-3.4-.9-1-1.9-1.7-3.1-2.3-1.2-.6-2.6-.8-4.2-.8s-2.9.3-4.2.8c-1.1.6-2.2 1.4-3 2.3-.9 1-1.5 2.1-2 3.4-.4 1.3-.7 2.7-.7 4.2s.2 2.9.7 4.2c.4 1.3 1.1 2.4 2 3.4.9 1 1.9 1.7 3.1 2.3 1.2.6 2.6.8 4.2.8 1.5 0 2.9-.3 4.2-.8 1.2-.6 2.3-1.3 3.1-2.3.9-1 1.5-2.1 2-3.4.4-1.3.7-2.7.7-4.2-.1-1.5-.3-2.9-.8-4.2zM81 17.6c0 1-.1 1.9-.4 2.7-.2.8-.6 1.6-1.1 2.2-.5.6-1.1 1.1-1.7 1.4-.7.3-1.5.5-2.4.5-.9 0-1.7-.2-2.4-.5s-1.3-.8-1.7-1.4c-.5-.6-.8-1.3-1.1-2.2-.2-.8-.4-1.7-.4-2.7v-.1c0-1 .1-1.9.4-2.7.2-.8.6-1.6 1.1-2.2.5-.6 1.1-1.1 1.7-1.4.7-.3 1.5-.5 2.4-.5.9 0 1.7.2 2.4.5s1.3.8 1.7 1.4c.5.6.8 1.3 1.1 2.2.2.8.4 1.7.4 2.7v.1zM92.9 28 87 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L152 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
</svg>
</a>
</div>
<div class="govuk-header__content">
<a href="#" class="govuk-header__link govuk-header__service-name">
Service name
</a>
<nav aria-label="Menu" class="govuk-header__navigation">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>Menu</button>
<ul id="navigation" class="govuk-header__navigation-list">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<a class="govuk-header__link" href="#">
Navigation item 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">
Navigation item 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#">
Navigation item 3
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="govuk-width-container app-width-container">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Alpha
</strong>
<span class="govuk-phase-banner__text">
This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
</span>
</p>
</div>
<a href="#" class="govuk-back-link">Back</a>
<main class="govuk-main-wrapper app-main-class" id="main-content" role="main">
<h1 class="govuk-heading-xl">Customised page template</h1>
</main>
</div>
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Help
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Cookies
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Contact
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Terms and conditions
</a>
</li>
</ul>
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41">
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import {
initAll
} from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
</body>
</html>{# 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 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 %}
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
{% endblock %}
{% block bodyStart %}
<form action="/form-handler" method="post" novalidate>
{{ 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: "submit",
name: "cookies[analytics]",
value: "yes"
},
{
text: "Reject analytics cookies",
type: "submit",
name: "cookies[analytics]",
value: "no"
},
{
text: "View cookies",
href: "#"
}
]
}
]
}) }}
</form>
{% 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: "#",
text: "Navigation item 1",
active: true
},
{
href: "#",
text: "Navigation item 2"
},
{
href: "#",
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: "#",
text: "Help"
},
{
href: "#",
text: "Cookies"
},
{
href: "#",
text: "Contact"
},
{
href: "#",
text: "Terms and conditions"
}
]
}
}) }}
{% endblock %}
{% block bodyEnd %}
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll()
</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 </body> 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
| 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 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.
|
| 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.
|
| 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.
|
| 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
Help improve this style
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.