Skip to content

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.


npm install @nib/info-box


import InfoBox from '@nib/info-box';

Interactive demo


We'll waive the 2 and 6 month wait on your Extras! So you can start claiming right away. New Australian resident members only.


All props passed directly to <InfoBox/> will be applied to the underlying <Box> as attributes.

children (required)nodeThe content of the InfoBox.
titlestringThe title of the InfoBox. Renders as a Heading above the content.
titleComponentstringh3The underlying hX component of the InfoBox title.
withIconbooleantrueWhether to include an icon to be specified in the icon prop.
iconnodeInfoSystemIconThe icon to be rendered on the top-left of the InfoBox. Must be one from the @nib/icons library.
withBorderbooleantrueWhether to add a left border to the InfoBox. The colour of this border will be theme's brand base.
iconAndBorderColorstringThe colour of the icon (the fill for the System icons, and accentFill for the Graphic icons) and the InfoBox left border.
backgroundColorstring'white'The background colour of the InfoBox. Must be one of 'light' or 'white'.
withBoxShadowbooleantrueWhether to add a box shadow around the InfoBox.
withTipbooleanfalseWhether to add a tip to the top of the InfoBox.
tipLocationstring'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'.



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.

User flows example


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.

Forms example


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.

System icon example

If the InfoBox is used to display promotional information then use a graphic icon.

Graphic icon example


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.

Border example