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.
|The content of the InfoBox.
|The title of the InfoBox. Renders as a
Heading above the content.
hX component of the InfoBox title.
|Whether to include an icon to be specified in the
|The icon to be rendered on the top-left of the InfoBox. Must be one from the @nib/icons library.
|Whether to add a left border to the InfoBox. The colour of this border will be theme's brand base.
|The colour of the
icon and the InfoBox left border.
|The background colour of the InfoBox. Must be one of
|Whether to add a box shadow around the InfoBox.
|Whether to add a tip to the top of the InfoBox.
|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
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.