Page not found (404)

.error-page-content {
  text-align: center;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--goa-color-greyscale-100);
}
/* Icon scaled beyond xlarge (2.5rem cap) to match the page-scale visual weight. */
/* Tracked in icon-sizes-above-xlarge gap ticket. */
.error-page-icon goa-icon,
.error-page-icon goab-icon {
  transform: scale(1.35);
}
.error-page-underline {
  width: 6.875rem;
  height: var(--goa-space-xs);
  background-color: var(--goa-color-info-default);
}
<GoabPageBlock>
  <div className="error-page-content">
    <GoabBlock
      direction="column"
      alignment="center"
      gap="xl"
      width="100%"
      mt="3xl"
      mb="3xl"
    >
      <GoabBlock direction="column" alignment="center" gap="m" width="100%">
        <div className="error-page-icon">
          <GoabIcon role="presentation" type="warning" size="xlarge" />
        </div>
        <GoabText size="body-m" color="secondary" mt="none" mb="none">
          Error 404
        </GoabText>
        <div className="error-page-underline" aria-hidden="true" />
      </GoabBlock>

      <GoabBlock direction="column" alignment="center" gap="l" width="100%">
        <GoabText tag="h1" size="heading-l" mt="none" mb="none">
          Page not found
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          The page you're looking for doesn't exist or has been moved.
        </GoabText>
      </GoabBlock>

      <GoabButton type="primary" size="compact" onClick={() => (window.location.href = "/")}>
        Go to home page
      </GoabButton>
    </GoabBlock>
  </div>
</GoabPageBlock>
goHome() {
  window.location.href = "/";
}
<goab-page-block>
  <div class="error-page-content">
    <goab-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goab-block direction="column" alignment="center" gap="m" width="100%">
        <div class="error-page-icon">
          <goab-icon role="presentation" type="warning" size="xlarge"></goab-icon>
        </div>
        <goab-text size="body-m" color="secondary" mt="none" mb="none">Error 404</goab-text>
        <div class="error-page-underline" aria-hidden="true"></div>
      </goab-block>

      <goab-block direction="column" alignment="center" gap="l" width="100%">
        <goab-text tag="h1" size="heading-l" mt="none" mb="none">Page not found</goab-text>
        <goab-text size="body-m" mt="none" mb="none">The page you're looking for doesn't exist or has been moved.</goab-text>
      </goab-block>

      <goab-button type="primary" size="compact" (onClick)="goHome()">Go to home page</goab-button>
    </goab-block>
  </div>
</goab-page-block>
<goa-page-block>
  <div style="text-align: center;">
    <goa-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goa-block direction="column" alignment="center" gap="m" width="100%">
        <div
          style="display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: var(--goa-color-greyscale-100);"
        >
          <goa-icon role="presentation" type="warning" size="xlarge" style="transform: scale(1.35);"></goa-icon>
        </div>
        <goa-text size="body-m" color="secondary" mt="none" mb="none">Error 404</goa-text>
        <div
          aria-hidden="true"
          style="width: 6.875rem; height: 0.5rem; background-color: var(--goa-color-info-default);"
        ></div>
      </goa-block>

      <goa-block direction="column" alignment="center" gap="l" width="100%">
        <goa-text as="h1" size="heading-l" mt="none" mb="none">Page not found</goa-text>
        <goa-text size="body-m" mt="none" mb="none">The page you're looking for doesn't exist or has been moved.</goa-text>
      </goa-block>

      <goa-button version="2" type="primary" size="compact" onclick="window.location.href='/'">Go to home page</goa-button>
    </goa-block>
  </div>
</goa-page-block>

Uses a plain h1 as the page landmark. The decorative icon and accent bar are aria-hidden. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages; a static error route does not meet that criterion.

A full page that tells the user a page can’t be found, with an action to get them back on track.

When to use

  • A user navigates to a URL that doesn’t exist in your service.
  • A resource has been moved or deleted and you need a catch-all route.
  • As the fallback route rendered by your router’s outlet.

Considerations

  • Keep the message short and give the user one clear next step.
  • Render the pattern inside your existing layout (e.g. as the route in a GoabOneColumnLayout outlet) so it sits below your service’s header and above its footer.
  • A small amount of custom CSS covers the icon-in-circle treatment, the brand-color accent bar, centred text, and the icon scaled beyond xlarge. Each is a pattern the design system doesn’t yet cover and is tracked as a gap for the library to absorb over time.
  • The <h1> uses heading-l (not the default heading-xl) to match the Figma spec for page-scale error states.
View old example docs