Skip to main content
live This is a new website – your feedback will help us to improve it.

Page not found page

Overview

Use this page pattern where a page can’t be found. This pattern should be shown for 404 Not Found errors.

Page patterns represent complete pages that should be used with few changes to promote consistency. If you are using one of the Style Kit’s themes or templates, this page pattern is available as a special layout or view.

This pattern is based on the page not found pattern from the Government Digital Service (GDS) Design System.

Uses

Use this pattern when the user:

  • 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

When using this pattern, do not:

  • blame the user or use red (danger) text
  • use technical jargon like ‘404’ or ‘resource not found’, use ‘page’
  • use informal or humourous words like ‘oops’

Where known, include an email address for, or link to information on, a team that can provide information on the service. If there isn’t a contact for a service, use the BAS IT Service Desk.

Try not to use specific people as contacts, as they may be on holiday or change role.

Variants

Basic

Use the .bsk-pattern-page-not-found class to create a page element containing:

  • a page title of ‘Page not found - [website or application]’
  • a page header with ‘Page not found’ as a h1 header
  • contact information

Page not found

If you typed the web address, check it is correct.

If you pasted the web address, check you copied the entire address.

If the web address is correct or you selected a link or button, contact us to let us know.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-page-not-found">
  <h1 class="bsk-page-header">Page not found</h1>
  <p>If you typed the web address, check it is correct.</p>
  <p>If you pasted the web address, check you copied the entire address.</p>
  <p>If the web address is correct or you selected a link or button, <a href="mailto:servicedesk.bas.ac.uk">contact us</a> to let us know.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example