Error Template
Error Template defines the layout and styling of an error page, but not the content.
GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab
Installation
bash
npm install @nib-components/error-template
Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.
Usage
jsx
import ErrorTemplate from '@nib-components/error-template';
Interactive demo
jsx
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. |
titleComponent | string | The underlying component of the error-template title.Must be one of h1, h2, h3, h4, h5, h6, div, label, span, header. | |
titleSize | number or object | 1 | The size of the error-template title. Must be one of 1, 2, 3, 4, 5, 6. Can be made responsive by passing an object of breakpoints. If you are passing a responsive object, you must provide xs breakpoint value. |
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. |