Error Template

Error Template defines the layout and styling of an error page, but not the content.

Installation

bash

npm install @nib-components/error-template

Usage

jsx

import ErrorTemplate from '@nib-components/error-template';

Interactive demo

[404]

It looks like the page you're looking for cannot be found.

Back to homepage

jsx

<ErrorTemplate title="[404]" description="It looks like the page you're looking for cannot be found." invertSmallHeader={false}>
  <SecondaryButton component="a" href="https://www.nib.com.au" id="ga-inlink-404-back-to-homepage">
    Back to homepage
  </SecondaryButton>
</ErrorTemplate>

<ErrorTemplate title="[404]" description="It looks like the page you're looking for cannot be found." invertSmallHeader={false}>
  <SecondaryButton component="a" href="https://www.nib.com.au" id="ga-inlink-404-back-to-homepage">
    Back to homepage
  </SecondaryButton>
</ErrorTemplate>

Props

Prop	Type	Default	Description
`title` (required)	string		The error page title.
`description` (required)	string		The error page description.
`showSmallHeaderMenu`	boolean	`false`	A pass-through prop to the `showMenu` prop in the `SmallHeader` component to be used in conjunction with `smallLayout`. By default the small header footer layout shows no menu in the header. Set to `true` to use the config provided by the variation.
`variation`	string	`arhi`	Which version of the header/footer to use. One of `arhi`, `nz`, `shareholders`, `international`, `foundation`.
`isCorporate`	boolean	`false`	Use the corporate phone number from the variation config, if it exists. Otherwise use default.
`invertSmallHeader`	boolean	`false`	Whether to apply the `invert` prop to the `SmallHeader`.
`children`	node		Place any relevant content like `buttons` here. Since version `3.0.1` there is no `max-width` set on the element wrapping the children.

Edit this page

Error Template

Installation

Usage

Interactive demo

[404]

Props

Related components