Design Tokens for Mesh have just been released!
Skip to content

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

Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

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

Interactive demo

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 and the InfoBox left border.
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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.