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.
npm install @nib/info-box
import InfoBox from '@nib/info-box';
All props passed directly to
<InfoBox/> will be applied to the underlying
<Box> as attributes.
|node||The content of the InfoBox.|
|string||The title of the InfoBox. Renders as a |
|string||The underlying |
|boolean||Whether to include an icon to be specified in the |
|node||The icon to be rendered on the top-left of the InfoBox. Must be one from the @nib/icons library.|
|boolean||Whether to add a left border to the InfoBox. The colour of this border will be theme's brand base.|
|string||The colour of the |
|string||The background colour of the InfoBox. Must be one of |
|boolean||Whether to add a box shadow around the InfoBox.|
|boolean||Whether to add a tip to the top of the InfoBox.|
|string||The location to place the tip at the top of the InfoBox. Prop |
When the InfoBox is used within a user flow such as our online sales and join funnels, the InfoBox can be displayed alongside content.
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.
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 (
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.
Currently there are two border colours in use:
- Green (#008A20) is the default border color.
- Blue (#005BB9) is used in the join funnel to denote a price change.