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
  • 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>
  </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">
  <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">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 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" %}
Variables that can be used with Template
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.
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 %}
Blocks that can be used with Template
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 on govuk-design-system-support@digital.cabinet-office.gov.uk