Pages

Page not found

A page not found tells someone we cannot find the page they were trying to view. They are also known as 404 pages.

When to use

Use a page not found if someone is trying to view a page that does not exist.

In the native NHS App, this error only happens if someone selects a button or link leading to a page that does not exist. It means we need to fix the link.

Open this example (Page not found) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

<p>
We'll fix this link as soon as possible. Try again later or use a
different service.
</p>


<div class="nhsuk-inset-text nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
<span class="nhsuk-u-visually-hidden">Information: </span>


<p>
For urgent medical advice, use <a href="#">111 online</a> or call
<a href="#">111</a>.
</p>
</div>
</div>
</div>


{% from 'inset-text/macro.njk' import insetText %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

    <p>We'll fix this link as soon as possible. Try again later or use a different service.</p>

    {{ insetText({
      html: "<p>For urgent medical advice, use <a href='#'>111 online</a> or call <a href='#'>111</a>.</p>",
      classes:"nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4"
    }) }}

  </div>
</div>

If someone is accessing NHS App services in a web browser, this error can also happen if they:

  • type or copy a web address for a page that does not exist
  • type or copy a web address incorrectly
Open this example (Page not found - web) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

<p>If you typed the web address, check it was correct.</p>


<p>If you pasted the web address, check you copied the entire address.</p>


<p>
Otherwise, this may be a broken link that we will fix as soon as possible.
Try again later or use a different service.
</p>


<div class="nhsuk-inset-text nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
<span class="nhsuk-u-visually-hidden">Information: </span>


<p>
For urgent medical advice, use <a href="#">111 online</a> or call
<a href="#">111</a>.
</p>
</div>
</div>
</div>


{% from 'inset-text/macro.njk' import insetText %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

    <p>If you typed the web address, check it was correct.</p>

    <p>If you pasted the web address, check you copied the entire address.</p>

    <p>Otherwise, this may be a broken link that we will fix as soon as possible. Try again later or use a different service.</p>

    {{ insetText({
      html: "<p>For urgent medical advice, use <a href='#'>111 online</a> or call <a href='#'>111</a>.</p>",
      classes:"nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4"
    }) }}

  </div>
</div>

How to use

The page should have:

  • ‘Page not found – service name – NHS App’ as the page title
  • ‘Page not found’ as the H1
  • details of how to get urgent medical advice, if a broken link could be preventing users from using a service to get urgent medical help

Help improve this pattern

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.

Discuss 'Page not found' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.