Page not found (404) - GovBB Design System

On this page

Show this page when a URL does not match anything, and return the 404 status code so crawlers and monitoring see it as an error, not a normal page. Lead with a plain heading, say what may have happened, then give the user concrete ways forward: a short list of suggestions and buttons to the service directory and the homepage.

Preview

Page not found

Open in new tab

<div class="govbb-official-banner">
  <div class="govbb-width-container govbb-official-banner__inner">
    <div class="govbb-official-banner__crest">
      <img
        class="govbb-official-banner__icon"
        src="/assets/images/govbb-crest.svg"
        alt=""
      />
    </div>
    <div class="govbb-official-banner__text">
      <span>Official government website</span>
      <a
        class="govbb-official-banner__link"
        href="/government/website-information/"
      >
        Learn more
      </a>
    </div>
  </div>
</div>
<header class="govbb-header">
  <div class="govbb-width-container govbb-header__inner">
    <a href="/">
      <img
        class="govbb-header__logo"
        src="/assets/images/govbb-logo.svg"
        alt="gov.bb"
      />
    </a>
  </div>
</header>
<main class="govbb-width-container govbb-main-wrapper" id="main-content">
  <h1 class="govbb-text-h1">We couldn't find that page</h1>
  <p class="govbb-text-body">
    The page you're looking for may have been moved, removed, or the address may
    have been typed incorrectly.
  </p>

  <h2 class="govbb-text-h3">Suggestions:</h2>
  <ul class="govbb-list govbb-list--bullet">
    <li>Check the web address for typos</li>
    <li>Return to the homepage</li>
    <li>Browse our services directory</li>
  </ul>

  <div class="govbb-button-group">
    <a class="govbb-button govbb-button--secondary" href="/services/">
      Browse our services directory
    </a>
    <a class="govbb-button" href="/">Return to homepage</a>
  </div>
</main>
<footer class="govbb-footer">
  <div class="govbb-width-container govbb-footer__inner">
    <nav class="govbb-footer__nav" aria-label="Footer navigation">
      <ul class="govbb-footer__list">
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/">Home</a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/cookies">
            Cookie policy
          </a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/terms">
            Terms &amp; conditions
          </a>
        </li>
        <li class="govbb-footer__item">
          <a class="govbb-link govbb-footer__link" href="/sitemap">Sitemap</a>
        </li>
      </ul>
    </nav>
    <hr class="govbb-footer__divider" aria-hidden="true" />
    <div class="govbb-footer__end">
      <img
        class="govbb-footer__coat"
        src="/assets/images/govbb-crest.svg"
        alt=""
      />
      <p class="govbb-footer__copy">© 2026 Government of Barbados</p>
    </div>
  </div>
</footer>

When to use this page

Use it for any unmatched route. Do not redirect broken links to the homepage - the user loses the context of what they were trying to reach and cannot tell a typo from a page that has moved.

What to include

State that the page was not found, list what to check, and offer routes onward. Do not expose stack traces, internal paths or IDs. The page keeps the standard official banner, header and footer so users still know where they are.