Pages Page not found pages
Experimental

This pattern is currently experimental because more research is needed to validate it.

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

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

  <div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">

        <h1 class="govuk-heading-xl">Page not found</h1>
        <p class="govuk-body">We have reported this to the team that manages the service and they will fix it as soon as possible.</p>
        <p class="govuk-body">Contact us if you need to speak to someone about your tax credits.</p>
        <p class="govuk-body">Telephone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3900</strong>
        </p>
        <p class="govuk-body">Textphone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3909</strong>
        </p>
        <p class="govuk-body">Outside UK:<br>
          <strong class="govuk-!-font-weight-bold">+44 0808 157 0192</strong>
        </p>
        <p class="govuk-body">Opening times:<br>
          <strong class="govuk-!-font-weight-bold">Monday to Friday: 8am to 8pm</strong>
        </p>
        <p class="govuk-body">Closed Easter Sunday, Christmas Day, Boxing Day and New Year’s Day.</p>

      </div>
    </div>
  </div>

</div>

When to use this pattern

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

  • selects a link or button that takes them to a page that does not exist
  • types or copies a web address for a page that does not exist
  • types or copies a web address incorrectly

Test all links and buttons to make sure they work. Remember to do the hard work to make it simple.

Make sure any web addresses in your service, letters, forms and on GOV.UK are for pages that exist or redirect to pages that exist.

For example, if someone has bookmarked a confirmation or a page in the middle of a journey:

  • explain that the information or page is no longer available
  • give them a link or button to get to a sensible place in the service

How it works

The page should have:

  • “Page not found – service name – GOV.UK” as the page title
  • “Page not found” as the H1
  • contact information, if it exists and helps meet a user need

Contact information should either:

  • be a link to a specific page that includes numbers and opening times
  • include all numbers and opening times

The content should be clear and concise, not blame the user.

Do not use:

  • breadcrumbs
  • technical jargon like 404 or bad request
  • informal or humourous words like oops
  • red text to warn people

Service mistake

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

  <div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">

        <h1 class="govuk-heading-xl">Page not found</h1>
        <p class="govuk-body">We have reported this to the team that manages the service and they will fix it as soon as possible.</p>
        <p class="govuk-body">Contact us if you need to speak to someone about your tax credits.</p>
        <p class="govuk-body">Telephone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3900</strong>
        </p>
        <p class="govuk-body">Textphone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3909</strong>
        </p>
        <p class="govuk-body">Outside UK:<br>
          <strong class="govuk-!-font-weight-bold">+44 0808 157 0192</strong>
        </p>
        <p class="govuk-body">Opening times:<br>
          <strong class="govuk-!-font-weight-bold">Monday to Friday: 8am to 8pm</strong>
        </p>
        <p class="govuk-body">Closed Easter Sunday, Christmas Day, Boxing Day and New Year’s Day.</p>

      </div>
    </div>
  </div>

</div>

User mistake

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

  <div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">

        <h1 class="govuk-heading-xl">Page not found</h1>
        <p class="govuk-body">If you typed the web address, check it is correct.</p>
        <p class="govuk-body">If you pasted the web address, check you copied the entire address.</p>
        <p class="govuk-body"><a class="govuk-link" href="#">Contact the Tax Credit Helpline</a> if you need to speak to someone about your tax credits.</p>

      </div>
    </div>
  </div>

</div>

If you do not know why the page is not found

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

  <div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">

        <h1 class="govuk-heading-xl">Page not found</h1>
        <p class="govuk-body">If you typed the web address, check it is correct.</p>
        <p class="govuk-body">If you pasted the web address, check you copied the entire address.</p>
        <p class="govuk-body">If the web address is correct or you selected a link or button, you can:</p>
        <ul class="govuk-list govuk-list--bullet">
          <li><a class="govuk-list" href="#">contact the Tax Credit Helpline</a> if you need to speak to someone about your tax credits</li>
          <li>report the page not found</li>
        </ul>
        <p class="govuk-body">If you want us to tell you when we have fixed the link or button, give us your name and email address.</p>
        <form action="/form-handler" method="post">
          <div class="govuk-form-group">
            <label class="govuk-label" for="name">
    Name (optional)
  </label>
            <input class="govuk-input" id="name" name="name" type="text">
          </div>

          <div class="govuk-form-group">
            <label class="govuk-label" for="email">
    Email address
  </label>
            <input class="govuk-input" id="email" name="email" type="email">
          </div>

          <button type="submit" class="govuk-button">
  Report a page not found
</button>
        </form>
      </div>
    </div>
  </div>

</div>
{% from "input/macro.njk" import govukInput %}
{% from "button/macro.njk" import govukButton %}

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

  <div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">

        <h1 class="govuk-heading-xl">Page not found</h1>
        <p class="govuk-body">If you typed the web address, check it is correct.</p>
        <p class="govuk-body">If you pasted the web address, check you copied the entire address.</p>
        <p class="govuk-body">If the web address is correct or you selected a link or button, you can:</p>
        <ul class="govuk-list govuk-list--bullet">
          <li><a class="govuk-list" href="#">contact the Tax Credit Helpline</a> if you need to speak to someone about your tax credits</li>
          <li>report the page not found</li>
        </ul>
        <p class="govuk-body">If you want us to tell you when we have fixed the link or button, give us your name and email address.</p>
        <form action="/form-handler" method="post">
          {{ govukInput({
            label: {
              text: "Name (optional)"
            },
            id: "name",
            name: "name"
          }) }}

          {{ govukInput({
            label: {
              text: "Email address"
            },
            id: "email",
            name: "email",
            type: "email"
          }) }}

          {{ govukButton({
            text: "Report a page not found"
          }) }}
        </form>
      </div>
    </div>
  </div>

</div>

When a user submits the form, take them to a confirmation page which has:

  • “We have your details and what you were trying to do” as the H1
  • “We will email you when we have fixed the service” as the body content

Research on this pattern

More research is needed to find out if people:

  • can fix the problem on their own
  • understand what has happened
  • understand the content and if there is anything missing
  • would use a form to tell us about the problem and if that helps them

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Page not found pages’ on GitHub