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.
Default
This example shows the minimum required for an NHS service.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="">
<title>The NHS website - NHS</title>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
<link rel="preconnect dns-prefetch" href="https://www.nhs.uk/">
<link rel="preconnect dns-prefetch" href="https://assets.nhs.uk/" crossorigin>
<link rel="stylesheet" href="/css/main.css">
<script src="/js/main.min.js" defer></script>
<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">
</head>
<body class="">
<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" role="main">
<h1>Default page template</h1>
</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">© Crown copyright</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
{% block content %}
<h1>Default page template</h1>
{% endblock %}
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.
Content page template
The content page template example includes navigation and search in the header and a breadcrumbs component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="">
<title>
Content page template
</title>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
<link rel="preconnect dns-prefetch" href="https://www.nhs.uk/">
<link rel="preconnect dns-prefetch" href="https://assets.nhs.uk/" crossorigin>
<link rel="stylesheet" href="/css/main.css">
<script src="/js/main.min.js" defer></script>
<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">
</head>
<body class="">
<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>
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
<div class="nhsuk-width-container">
<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 </span>
Level three
</a>
</p>
</div>
</nav>
<div class="nhsuk-width-container ">
<main class="nhsuk-main-wrapper " id="maincontent" role="main">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1>
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">© Crown copyright</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% block pageTitle %}
Content page template
{% endblock %}
{% block beforeContent %}
{{ breadcrumb({
items: [
{
href: "#",
text: "Level one"
},
{
href: "#",
text: "Level two"
}
],
href: "#",
text: "Level three"
}) }}
{% 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 content %}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1>
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 %}
Transactional page template
The transactional page template example uses the transactional header and a back link component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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="">
<title>
Transactional page template
</title>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" crossorigin>
<link rel="preconnect dns-prefetch" href="https://www.nhs.uk/">
<link rel="preconnect dns-prefetch" href="https://assets.nhs.uk/" crossorigin>
<link rel="stylesheet" href="/css/main.css">
<script src="/js/main.min.js" defer></script>
<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">
</head>
<body class="">
<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 nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0">
<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" role="main">
<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">© Crown copyright</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
{% from 'back-link/macro.njk' import backLink %}
{% set mainClasses = "nhsuk-main-wrapper--s" %}
{% block pageTitle %}
Transactional page template
{% endblock %}
{% block outerContent %}
{{ backLink({
"href": "#",
"text": "Back",
"classes": "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
}) }}
{% endblock %}
{% block header %}
{{ header({
"transactionalService": {
"name": "Service name here",
"href": "#"
},
"showNav": "false",
"showSearch": "false"
})
}}
{% 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 %}
Vertical padding is reduced on transactional services using the .nhsuk-main-wrapper--s
modifier class. We also recommended you use a smaller page heading size using the .nhsuk-heading-l
modifier class.
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:
{% 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:
{% 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:
{% from 'header/macro.njk' import header %}
{% block header %}
{{ header ({
showSearch: true
}) }}
{% endblock %}
Options
Option name | Option type | Description |
---|---|---|
beforeContent | Block |
Add content that needs to appear outside <main> element and <div class="nhsuk-width-container"> .
For example: the breadcrumbs 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.
|
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" />
|
main | Block |
Override the main section of the page, which by default wraps the <main> element, outerContent block and content block.
|
mainClasses | Variable | Add a class to the <main> element. |
outerContent | Block |
Add content that needs to appear outside <main> element but inside the <div class="nhsuk-width-container"> .
For example: the back link component. |
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
Have you tested these styles?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
Before you start, you will need a GitHub account. It's an open forum where we collect feedback.
If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.
Updated: February 2021