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-enabledclass, 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.
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon" />
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/all.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
<meta property="og:image" content="/assets/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body ">
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</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 role="presentation" 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 src="/govuk-frontend/all.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>{% 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://github.com/alphagov/govuk-frontend/blob/master/docs/installation/supporting-internet-explorer-8.md #}
<!--[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 adding a service name and navigation or adding a block before the main contain to include 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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon" />
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/all.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
<meta property="og:image" content="/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body app-body-class">
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="#" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a href="#" class="govuk-header__link govuk-header__link--service-name">
Service name
</a>
<button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<nav>
<ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<a class="govuk-header__link" href="#1">
Navigation item 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#2">
Navigation item 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#3">
Navigation item 3
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="govuk-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="#1">
Help
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#2">
Cookies
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#3">
Contact
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#4">
Terms and conditions
</a>
</li>
</ul>
<svg role="presentation" 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 src="/govuk-frontend/all.js"></script>
</body>
</html>{# Example that changes every setting in the template #}
{% from "back-link/macro.njk" import govukBackLink %}
{% from "skip-link/macro.njk" import govukSkipLink %}
{% from "header/macro.njk" import govukHeader %}
{% from "phase-banner/macro.njk" import govukPhaseBanner %}
{% from "footer/macro.njk" import govukFooter %}
{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set themeColor = "blue" %}
{% set bodyClasses = "app-body-class" %}
{% 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://github.com/alphagov/govuk-frontend/blob/master/docs/installation/supporting-internet-explorer-8.md #}
<!--[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 %}
{% endblock %}
{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
{% endblock %}
{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "govuk-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 %}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" %}
| 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 %}
| 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
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: