Restricted access (401)

.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 401
        </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">
          Restricted access
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at{" "}
          <GoabLink>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </GoabLink>{" "}
          to request access.
        </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 401</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">Restricted access</goab-text>
        <goab-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goab-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goab-link>
          to request access.
        </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 401</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">Restricted access</goa-text>
        <goa-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goa-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goa-link>
          to request access.
        </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. The support email is a real mailto link inside GoabLink so keyboard users can activate it. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages.

A full page that tells the user they cannot access the requested resource, with a clear next step and a way to contact support.

When to use

A user lands on a page that requires authentication they don’t have.
A user’s session has expired and you need to prompt them to sign in again.
A user is signed in but lacks the role or permission for the requested resource.

Considerations

Keep the message short and give the user one clear next step (usually sign in or go home).
Include a support contact when the user may not be able to self-serve (for example, a role they need to be granted).
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