#GlobalError (404)

#Import

import { GlobalError } from '@dnb/eufemia'

#Description

The GlobalError is a simple component to integrate when a 404 or 500 has to be shown.

This page component is responsive and should be used as a client wide (fullscreen) component.

#Heading level

The GlobalError component uses the Heading component for its title. By default it renders as an h1, but it automatically respects the surrounding Heading.Level context. This means you can place it inside a Heading.Level to avoid duplicate h1 elements on your page:

<Heading.Level reset={1}>
  <Heading>Page Title</Heading>
  {/* GlobalError title will render as h2 */}
  <GlobalError statusCode="500" />
</Heading.Level>

You may also take a look at how it behaves once 404 or 500 is used in an application.

#Relevant links

• Figma
• Source code
• Docs code

#Demos

#To showcase the 404 status code component

<GlobalError statusCode="404" />

#To showcase the 500 status code component

<GlobalError statusCode="500" />

#To showcase a custom status code component

const links = [
  {
    text: 'Forside',
    url: 'https://www.dnb.no/',
  },
  {
    text: 'Forsikring',
    url: 'https://www.dnb.no/forsikring/',
  },
  {
    text: 'Sparing',
    url: 'https://www.dnb.no/sparing/',
  },
  {
    text: 'Lån',
    url: 'https://www.dnb.no/lan/',
  },
  {
    text: 'Kontakt',
    url: 'https://www.dnb.no/hjelp-og-veiledning/',
  },
]
render(
  <GlobalError
    statusCode="403"
    title="Access Denied"
    text="More related text"
    links={links}
  >
    Additional Content
  </GlobalError>
)