Styles - Page template

Use this template to keep your pages consistent with other NHS services.

This page template combines boilerplate markup and components needed for a content page and a transactional page. This includes:

  • JavaScript that adds a js-enabled class, which components with JavaScript behaviour need
  • the skip link, header and footer components
  • favicons, and other page metadata

The examples we give 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.

Page title

The page title (<title>) is in the HTML metadata, in the <head> section. It is displayed in the browser tab.

A basic page title is made up of the main page heading (the <h1>) and the website name, separated by a dash. For example: <title>Flu – NHS</title>, which is the title for the flu page on the NHS website. Use a unique and informative title on every page.

More complex page titles

A page title can have up to 4 elements separated by dashes. They are the:

  • <h1>
  • section name, if the service has more than 1 section
  • service name
  • website

Examples from the NHS website include:

  • Money, work, benefits and social care – Social care and support guide – NHS
  • How old are you? – Calculate your heart age – NHS

This is an example from HMRC:
Do you live in the UK? – Your details – Manage your tax credits – GOV.UK

If the user makes an error, add "Error: " to the beginning of the title so screen readers read it out as soon as possible.

Personally identifiable information

If there is personally identifiable information in the <h1>, for example, in a transactional journey, you must make sure it is not recorded in your analytics package.

For example, if the <h1> is "What is Gordon's date of birth?", record "What is their date of birth?".

To do this you could change the page title to use "their" but keep "Gordon" in the <h1>. Or you could keep "Gordon" in the page title and send a different page title to your analytics package.

Find out more about writing good headings in the content guide.

Default page template

This example shows the minimum required for an NHS service.

Open this default page template example in a new tab
Copy default page template code 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Default page template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">

  <link rel="shortcut icon" href="/nhsuk-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/nhsuk-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/nhsuk-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/nhsuk-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/nhsuk-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/nhsuk-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/nhsuk-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/nhsuk-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/nhsuk-frontend/assets/favicons/largetile-310x310.png">

  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
</head>

<body>
  <script>
    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');

  </script>

  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>

  <header class="nhsuk-header" role="banner">

    <div class="nhsuk-header__container">
      <div class="nhsuk-header__logo nhsuk-header__logo--only"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
          <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
            <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
            <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
          </svg>
        </a> </div>
    </div>

  </header>

  <div class="nhsuk-width-container">
    <main class="nhsuk-main-wrapper" id="maincontent">
      <div class="nhsuk-grid-row">
        <div class="nhsuk-grid-column-two-thirds">
          <h1 class="nhsuk-heading-l">
            Default page template
          </h1>
        </div>
      </div>
    </main>
  </div>

  <footer role="contentinfo">
    <div class="nhsuk-footer-container">
      <div class="nhsuk-width-container">
        <h2 class="nhsuk-u-visually-hidden">Support links</h2>
        <div class="nhsuk-footer">
          <ul class="nhsuk-footer__list"> </ul>
          <div>
            <p class="nhsuk-footer__copyright">© NHS England</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close default page template code
Copy default page template code 
{% set assetPath = "/nhsuk-frontend/assets" %}

{% block head %}
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
{%- endblock %}

{% block pageTitle -%}
  Default page template
{%- endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">
      <h1 class="nhsuk-heading-l">
        Default page template
      </h1>
    </div>
  </div>
{% endblock %}
Close default page template code

Customised page template

You can customise the page template, for example, by structuring your page layout, using the organisational header or adding a block before the main container to include a breadcrumbs component.

Transactional page template

The transactional page template example uses the transactional service header and a back link component.

Open this transactional page template example in a new tab
Copy transactional page template code 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Transactional page template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">

  <link rel="shortcut icon" href="/nhsuk-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/nhsuk-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/nhsuk-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/nhsuk-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/nhsuk-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/nhsuk-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/nhsuk-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/nhsuk-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/nhsuk-frontend/assets/favicons/largetile-310x310.png">

  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
</head>

<body>
  <script>
    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');

  </script>

  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>

  <header class="nhsuk-header nhsuk-header__transactional" role="banner">

    <div class="nhsuk-header__container">
      <div class="nhsuk-header__logo nhsuk-header__transactional--logo"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
          <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
            <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
            <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
          </svg>
        </a> </div>
      <div class="nhsuk-header__transactional-service-name">
        <a class="nhsuk-header__transactional-service-name--link" href="#">Service name here</a>
      </div>
    </div>

  </header>

  <div class="nhsuk-width-container">

    <div class="nhsuk-back-link"> <a class="nhsuk-back-link__link" href="#">
        <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
          <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
        </svg>
        Back</a>
    </div>

    <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
      <div class="nhsuk-grid-row">
        <div class="nhsuk-grid-column-two-thirds">
          <h1 class="nhsuk-heading-l">
            Transactional page template
          </h1>
        </div>
      </div>
    </main>
  </div>

  <footer role="contentinfo">
    <div class="nhsuk-footer-container">
      <div class="nhsuk-width-container">
        <h2 class="nhsuk-u-visually-hidden">Support links</h2>
        <div class="nhsuk-footer">
          <ul class="nhsuk-footer__list">
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
            </li>
          </ul>
          <div>
            <p class="nhsuk-footer__copyright">© NHS England</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close transactional page template code
Copy transactional page template code 
{% from "back-link/macro.njk" import backLink %}

{% set assetPath = "/nhsuk-frontend/assets" %}
{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block head %}
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
{%- endblock %}

{% block pageTitle -%}
  Transactional page template
{%- endblock %}

{% block header %}
  {{ header({
    transactionalService: {
        name: "Service name here",
        href: "#"
      },
      showNav: "false",
      showSearch: "false"
    })
  }}
{% endblock %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">
      <h1 class="nhsuk-heading-l">
        Transactional page template
      </h1>
    </div>
  </div>
{% endblock %}

{% block footer %}
  {{ footer({
    links: [
      {
        URL: "#",
        label: "Accessibility statement"
      },
      {
        URL: "#",
        label: "Contact us"
      },
      {
        URL: "#",
        label: "Cookies"
      },
      {
        URL: "#",
        label: "Privacy policy"
      },
      {
        URL: "#",
        label: "Terms and conditions"
      }
    ]
  })}}
{% endblock %}
Close transactional page template code

Vertical padding is reduced on transactional services using the .nhsuk-main-wrapper--s modifier class. We also recommend you use a smaller <h1> heading size using the nhsuk-heading-l modifier class.

Content page template

The content page template example includes navigation and search in the header and a breadcrumbs component.

We recommend you use a larger <h1> heading size using the nhsuk-heading-xl modifier class. Content pages may need more heading levels and the larger size makes the heading hierarchy clearer.

Open this content page template example in a new tab
Copy content page template code 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Content page template</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">

  <link rel="shortcut icon" href="/nhsuk-frontend/assets/favicons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/nhsuk-frontend/assets/favicons/apple-touch-icon-180x180.png">
  <link rel="mask-icon" href="/nhsuk-frontend/assets/favicons/favicon.svg" color="#005eb8">
  <link rel="icon" sizes="192x192" href="/nhsuk-frontend/assets/favicons/favicon-192x192.png">
  <meta name="msapplication-TileImage" content="/nhsuk-frontend/assets/favicons/mediumtile-144x144.png">
  <meta name="msapplication-TileColor" content="#005eb8">
  <meta name="msapplication-square70x70logo" content="/nhsuk-frontend/assets/favicons/smalltile-70x70.png">
  <meta name="msapplication-square150x150logo" content="/nhsuk-frontend/assets/favicons/mediumtile-150x150.png">
  <meta name="msapplication-wide310x150logo" content="/nhsuk-frontend/assets/favicons/widetile-310x150.png">
  <meta name="msapplication-square310x310logo" content="/nhsuk-frontend/assets/favicons/largetile-310x310.png">

  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
</head>

<body>
  <script>
    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');

  </script>

  <a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>

  <header class="nhsuk-header" role="banner">

    <div class="nhsuk-header__container">
      <div class="nhsuk-header__logo"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
          <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
            <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
            <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
          </svg>
        </a> </div>
      <div class="nhsuk-header__content" id="content-header">
        <div class="nhsuk-header__search">
          <div class="nhsuk-header__search-wrap" id="wrap-search">
            <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
              <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
              <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
              <button class="nhsuk-search__submit" type="submit">
                <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
                </svg>
                <span class="nhsuk-u-visually-hidden">Search</span>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="nhsuk-navigation-container">
      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
        <ul class="nhsuk-header__navigation-list">
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Health A-Z
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Live Well
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Care and support
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Pregnancy
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              NHS services
            </a>
          </li>
          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
            <a class="nhsuk-header__navigation-link" href="/">
              Home
            </a>
          </li>
          <li class="nhsuk-mobile-menu-container">
            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
              <span class="nhsuk-u-visually-hidden">Browse</span>
              More
              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
              </svg>
            </button>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="nhsuk-width-container">

    <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
      <ol class="nhsuk-breadcrumb__list">
        <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Level one</a></li>
        <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Level two</a></li>
        <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Level three</a></li>
      </ol>
      <p class="nhsuk-breadcrumb__back">
        <a class="nhsuk-breadcrumb__backlink" href="#">
          <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
          Level three
        </a>
      </p>
    </nav>

    <main class="nhsuk-main-wrapper" id="maincontent">
      <div class="nhsuk-grid-row">
        <div class="nhsuk-grid-column-two-thirds">
          <h1 class="nhsuk-heading-xl">
            Content page template
          </h1>
        </div>
      </div>
    </main>
  </div>

  <footer role="contentinfo">
    <div class="nhsuk-footer-container">
      <div class="nhsuk-width-container">
        <h2 class="nhsuk-u-visually-hidden">Support links</h2>
        <div class="nhsuk-footer">
          <ul class="nhsuk-footer__list">
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">NHS sites</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">About us</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Site map</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Our policies</a>
            </li>
            <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
              <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
            </li>
          </ul>
          <div>
            <p class="nhsuk-footer__copyright">© NHS England</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

</body>

</html>
Close content page template code
Copy content page template code 
{% from "breadcrumb/macro.njk" import breadcrumb %}

{% set assetPath = "/nhsuk-frontend/assets" %}

{% block head %}
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.min.js" defer></script>
{%- endblock %}

{% block pageTitle -%}
  Content page template
{%- endblock %}

{% block header %}
  {{ header({
      showNav: "true",
      showSearch: "true",
      primaryLinks: [
        {
          url  : "#",
          label : "Health A-Z"
        },
        {
          url : '#',
          label : 'Live Well'
        },
        {
          url  : '#',
          label : 'Care and support'
        },
        {
          url  : '#',
          label : 'Pregnancy'
        },
        {
          url : '#',
          label : 'NHS services'
        } 
      ]
    })
}}
{% endblock %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        href: "#",
        text: "Level one"
      },
      {
        href: "#",
        text: "Level two"
      }
    ],
    href: "#",
    text: "Level three"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">
      <h1 class="nhsuk-heading-xl">
        Content page template
      </h1>
    </div>
  </div>
{% endblock %}

{% block footer %}
  {{ footer({
    links: [
      {
        URL: "#",
        label: "NHS sites"
      },
      {
        URL: "#",
        label: "About us"
      },
      {
        URL: "#",
        label: "Contact us"
      },
      {
        URL: "#",
        label: "Profile editor login"
      },
      {
        URL: "#",
        label: "Site map"
      },
      {
        URL: "#",
        label: "Accessibility statement"
      },
      {
        URL: "#",
        label: "Our policies"
      },
      {
        URL: "#",
        label: "Cookies"
      }
    ]
  })}}
{% endblock %}
Close content page template code

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 <main> element using the mainClasses option:

Copy set content page template code 
{% set mainClasses = "nhsuk-main-wrapper--s" %}

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:

Copy block page template code 
{% 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:

Copy component page template code 
{% from 'header/macro.njk' import header %}

{% block header %}
  {{ header ({
    showSearch: true
  }) }}
{% endblock %}

Options

Options that you can use with the page template
Option name Option type Description
assetPath Variable Path to the NHS frontend assets (icons and images).
Defaults to /assets.
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.
beforeContent Block Add content that needs to appear within the <div class="nhsuk-width-container"> container but outside the <main> element.
For example: the breadcrumbs component and the back link.
bodyEnd Block Add content just before the closing </body> element.
bodyStart Block Add content after the opening <body> element.
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.
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 NHS.UK branded pages.
For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
htmlAttributes Variable Add attributes to the <html> element. Add each attribute and its value in the htmlAttributes object.
htmlLang Variable Override the default language of your page. Defaults is en for English.
main Block Override the main section of the page, which by default wraps the beforeContent block, the <main> element, and content block.
mainClasses Variable Add a class to the <main> element.
pageTitle Block Override the default page title (<title> element).
skipLink Block Override the default skip link component.

Exploded view of the page template block areas

Open this annotated page template example in a new tab

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: April 2025