Tasks - Reassure users 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.

Open this default reassure users that a page is up to date example in new window
Copy default reassure users that a page is up to date code 
<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>
Close default reassure users that a page is up to date code
Copy default reassure users that a page is up to date code 
<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>
Close default reassure users that a page is up to date code

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.

Open this page reassure users that a page is up to date example in new window
Copy page reassure users that a page is up to date code 
<!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-width-container 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__menu">
          <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
        </div>

        <div class="nhsuk-header__search">
          <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
            <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
              <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>
          <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="q" 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" width="27" height="27">
                  <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>
              <button class="nhsuk-search__close" id="close-search">
                <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                  <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
                </svg>
                <span class="nhsuk-u-visually-hidden">Close search</span>
              </button>
            </form>
          </div>
        </div>

      </div>

    </div>

    <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
      <div class="nhsuk-width-container">
        <p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
          <button class="nhsuk-header__navigation-close" id="close-menu">
            <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
              <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
            </svg>
            <span class="nhsuk-u-visually-hidden">Close menu</span>
          </button>
        </p>
        <ul class="nhsuk-header__navigation-list">
          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
            <a class="nhsuk-header__navigation-link" href="/">
              Home
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Health A-Z
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Live Well
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Care and support
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              Pregnancy
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
          <li class="nhsuk-header__navigation-item">
            <a class="nhsuk-header__navigation-link" href="#">
              NHS services
              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
                <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>
            </a>
          </li>
        </ul>
      </div>
    </nav>

  </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="#">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 &nbsp;</span>
          Health A-Z
        </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>
            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" id="nhsuk-footer">
      <div class="nhsuk-width-container">
        <h2 class="nhsuk-u-visually-hidden">Support links</h2>
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">NHS sites</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">About us</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Contact us</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Site map</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Our policies</a></li>
          <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Cookies</a></li>
        </ul>

        <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
      </div>
    </div>
  </footer>

</body>

</html>
Close page reassure users that a page is up to date code
Copy page reassure users that a page is up to date code 
{% 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 %}
Close page reassure users that a page is up to date code

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:

Image of video showing exercise trainer doing workout on mat in fitness studio
Example of review date used under a video

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.

Have you tested this pattern?

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.

Share your findings on GitHub

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: July 2022