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
- favicon, and other related theme icons
In the examples provided, we show both HTML and Nunjucks.
You can use the HTML examples if you aren’t 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">
<meta name="theme-color" content="#0b0c0c" />
<link rel="shortcut icon" 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 class="govuk-header__content">
</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="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script src="/govuk-frontend/all.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>{% extends "template.njk" %}
{% 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
<!DOCTYPE html>
<html lang="fr" class="govuk-template app-html-class">
<head>
<meta charset="utf-8" />
<title>GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="blue" />
<link rel="shortcut icon" 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">Passer au contenu principal</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">
Nom du service
</a>
<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">
Élément de navigation 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#2">
Élément de navigation 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#3">
Élément de navigation 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">
C'est un nouveau service - vos <a class="govuk-link" href="#">commentaires</a> nous aideront à l'améliorer.
</span>
</p>
</div>
<a href="#" class="govuk-back-link">Retourner</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">
Aidez-moi
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#2">
Politique de confidentialité
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#3">
Contactez-nous
</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="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/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 %}
{% extends "template.njk" %}
{% set htmlClasses = 'app-html-class' %}
{% set htmlLang = 'fr' %}
{% set assetPath = '' %}
{% set themeColor = 'blue' %}
{% set bodyClasses = 'app-body-class' %}
{% block pageTitle %}GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information{% 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: 'Passer au contenu principal'
}) }}
{% endblock %}
{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "govuk-width-container",
serviceName: "Nom du service",
serviceUrl: "#",
navigation: [
{
href: '#1',
text: 'Élément de navigation 1',
active: true
},
{
href: '#2',
text: 'Élément de navigation 2'
},
{
href: '#3',
text: 'Élément de navigation 3'
}
]
}) }}
{% endblock %}
{% set mainClasses = 'app-main-class' %}
{% block main %}
{{ super() }}
{% endblock %}
{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
},
html: 'C\'est un nouveau service - vos <a class="govuk-link" href="#">commentaires</a> nous aideront à l\'améliorer.'
}) }}
{{ govukBackLink({
"href": "#",
"text": "Retourner"
}) }}
{% endblock %}
{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
{% endblock %}
{% block footer %}
{{ govukFooter({
"meta": {
"items": [
{
"href": "#1",
"text": "Aidez-moi"
},
{
"href": "#2",
"text": "Politique de confidentialité"
},
{
"href": "#3",
"text": "Contactez-nous"
}
]
}
}) }}
{% 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/ as an available view:
nunjucks.configure('node_modules/govuk-frontend/', {
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. |
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 |
|---|---|
| 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 default <main> element.
|
| 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 after just before the closing </body> element
|
Exploded view of the page template block areas
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team