Bifrost Design System

Page error

Introduction

Page errors occur when an entire page or view cannot be displayed due to a critical system, permission, or resource issue. These errors typically interrupt the user's workflow and require special handling to clearly communicate the problem and provide recovery options.

Common page error types include:

404 - Not Found

This error occurs when the requested page or resource cannot be located. It may be caused by a broken link, an incorrect URL, or a page that has been moved or deleted.

The page could not be found

Sometimes a glitch happens, but you can try again or contact support.

403 - Forbidden

This error indicates that the user does not have permission to access the requested page or resource.

No access to this page

You do not have the necessary permissions.

Generic Errors

Generic errors are used when the exact cause of the issue cannot be determined or does not fall into a specific category.

Something went wrong here

Our developers are on the case!

Failed to load data

This error appears when requested data cannot be retrieved, typically due to a network issue or a temporary server problem. Include a brief description explaining what went wrong. For compact layouts, use a shortened version of the description in a tooltip. Display the error inline, exactly where the missing data would normally appear, while keeping the rest of the page fully functional.

Compact

The compact variant is typically used in smaller spaces, such as sections or widgets.

Failed to load data

Regular

The regular variant is intended for larger areas, such as full-page views or primary content panels.

Failed to load data

Unable to connect to the server.

Figma components

There are pre-designed components available in Figma to help you implement consistent page errors in your designs: Page error

Code examples

These are simplified examples, in production code you would need to:

Download error illustration SVG files from SharePoint matching your theme and include them in your project
Add button actions, or use links styled as buttons for navigation
Consider centering the content vertically, depending on the layout of your page

React

Open Sandbox

import Button from "@intility/bifrost-react/Button";
import Inline from "@intility/bifrost-react/Inline";
import Grid from "@intility/bifrost-react/Grid";

export default function ErrorPageExample() {
  return (
    <Grid
      style={{ justifyItems: "center" }}
      className="bf-page-padding bf-elements"
    >
      <img
        className="bf-light-only"
        style={{ height: 200 }}
        src="https://bifrost.intility.com/illustrations/error-light.svg"
        alt=""
      />
      <img
        className="bf-dark-only"
        style={{ height: 200 }}
        src="https://bifrost.intility.com/illustrations/error-dark.svg"
        alt=""
      />
      <h1 style={{ margin: "16px 0 0 0" }}>Error title</h1>
      <div className="bf-large">More descriptive message text</div>
      <Inline style={{ marginTop: 12 }}>
        <Button>Secondary action</Button>
        <Button variant="filled">Primary action</Button>
      </Inline>
    </Grid>
  );
}

HTML

Open Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div
  class="bf-elements"
  style="display: grid; justify-items: center; padding: 52px; gap: 12px;"
>
  <img
    class="bf-light-only"
    style="height: 200px;"
    src="https://bifrost.intility.com/illustrations/error-light.svg"
    alt=""
  />
  <img
    class="bf-dark-only"
    style="height: 200px;"
    src="https://bifrost.intility.com/illustrations/error-dark.svg"
    alt=""
  />
  <h1 class="bf-h1" style="margin: 16px 0 0 0;">Error title</h1>
  <div class="bf-large">More descriptive message text</div>
  <div style="margin-top: 12px; display: flex; gap: 12px;">
    <button class="bf-button">Secondary action</button>
    <button class="bf-button bf-button-filled">Primary action</button>
  </div>
</div>