馃摚
Have your say in our Mesh survey
Skip to content
Stable

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

bash
npm install @nib/info-box

Usage

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

Interactive demo

Congratulations!

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

Props

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

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

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.

User flows example

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.

Forms example

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.

System icon example

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

Graphic icon example

Borders

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