Info Box
InfoBox is used to contain promotional or supporting information and is displayed either within a form or part of a user flow such as a sales or join funnel.
Installation
npm install @nib/info-box
Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.
Usage
import InfoBox from '@nib/info-box';
Interactive demo
Props
All props passed directly to <InfoBox/> will be applied to the underlying <Box> as attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | node | The content of the InfoBox. | |
title | string | The title of the InfoBox. Renders as a Heading above the content. | |
titleComponent | string | h3 | The underlying hX component of the InfoBox title. |
withIcon | boolean | true | Whether to include an icon to be specified in the icon prop. |
icon | node | InfoSystemIcon | The icon to be rendered on the top-left of the InfoBox. Must be one from the @nib/icons library. |
withBorder | boolean | true | Whether to add a left border to the InfoBox. The colour of this border will be theme's brand base. |
iconAndBorderColor | string | The colour of the icon and the InfoBox left border. | |
backgroundColor | string | 'white' | The background colour of the InfoBox. Must be one of 'light' or 'white'. |
withBoxShadow | boolean | true | Whether to add a box shadow around the InfoBox. |
withTip | boolean | false | Whether to add a tip to the top of the InfoBox. |
tipLocation | string | 'left' | The location to place the tip at the top of the InfoBox. Prop withTip must be true for this prop to work. Must be one of 'left', 'center', or 'right'. |
Usage
Context
User flows
When the InfoBox is used within a user flow such as our online sales and join funnels, the InfoBox can be displayed alongside content.
Forms
The InfoBox is a useful component that can help add further context or information to form sections or controls. When used within a form the form group border must align with the InfoBox border.
Icons
You are free to use either a system or graphic icon (or no icon at all) within the InfoBox.
System icons render at our sm icon sizing (24px) while the graphic icons render at our md icon sizing (32px).
If the InfoBox is used to display supporting information then use of a system icon.
If the InfoBox is used to display promotional information then use a graphic icon.