Help users to
-
Know that a page is up to date
Use review dates to let users know when a page was last checked and will be checked again.
- HTML code for default know that a page is up to date
- Nunjucks code for default know that a page is up to date
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0">
Page last reviewed: 15 March 2021<br>
Next review due: 15 March 2024
</p><p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0">
Page last reviewed: 15 March 2021<br>
Next review due: 15 March 2024
</p>When to use this pattern
Use this pattern when your research shows users need to know when the whole page was last checked and when it will be checked again.
When not to use this pattern
Do not use this pattern in transactional services. We have not tested review dates in forms.
Do not use it when you change something on a page but have not reviewed the whole page.
How the pattern works
The pattern consists of 2 dates:
- when you last reviewed the page
- when you will review it again
Put whole page review dates at the bottom of the page. They are not a high priority for users looking for information.
- HTML code for page know that a page is up to date
- Nunjucks code for page know that a page is up to date
<!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>
<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="#">Home</a></li>
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Health A-Z</a></li>
</ol>
<p class="nhsuk-breadcrumb__back">
<a class="nhsuk-breadcrumb__backlink" href="#">
<span class="nhsuk-u-visually-hidden">Back to </span>
Health A-Z
</a>
</p>
</nav>
<main class="nhsuk-main-wrapper " id="maincontent" role="main">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1>
Page heading
</h1>
<p>Health information goes here.</p>
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0">
Page last reviewed: 15 March 2021<br>
Next review due: 15 March 2024
</p>
</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>{% from 'breadcrumb/macro.njk' import breadcrumb %}
{% block pageTitle %}
Content page template
{% endblock %}
{% block beforeContent %}
{{ breadcrumb({
items: [
{
href: "#",
text: "Home"
}
],
href: "#",
text: "Health A-Z"
}) }}
{% 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>
Page heading
</h1>
<p>Health information goes here.</p>
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0">
Page last reviewed: 15 March 2021<br>
Next review due: 15 March 2024
</p>
</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 %}Embedded content, such as videos
Review dates for embedded content should sit close to the content they relate to. Include the last reviewed date (usually the production date) and next review date in the component that holds the embedded content. This is in addition to the page review date.
For example:
The review process
A page review involves reviewing the whole page to check that it is still accurate and up to date. Whole page reviews should be part of a planned content lifecycle where you create, then update or delete outdated content.
Depending on the content, this may involve checking it with a clinician or other subject matter expert. It also involves, for example, considering any user feedback and checking for broken links or accessibility issues.
For health content, it means reviewing the clinical evidence to make sure that the page is up to date. If there are changes to clinical content, a clinician must sign them off. Read more about making your service clinically safe.
The NHS website (nhs.uk) uses review dates on every page of health content as part of the work to meet the standard for creating health content, but not on campaign content.
Research
We tested review dates on a health information page in summer 2018.
At first we tested them away from the main content, closer to the footer of the page, separated by a rule, but users didn't notice them there. So we removed the rule and brought the dates closer to the content. Users then read them and said that they were helpful.
We have not tested review dates in transactional services and do not recommend using them. If you use a review date in a transactional service, please test it with users and let us know what you find.
Letting users know about content updates
Some teams find their users want to know if information has changed since the page was last reviewed or when there is an important update.
People who use the service manual and design system, for example, find it helpful to know when information on a page was last updated. We’re using an experimental "Updated" pattern on service manual pages to let users know when we’ve updated something on a page.
Please share any findings you have about telling users about content updates on GitHub. We’ll share our research findings there.
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.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: July 2022