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. |
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. |