Feature Panel

Installation

npm install @nib-components/feature-panel

Note: Feature Panel depends on the Icons component and therefore this package must be installed as well.

Usage

import FeaturePanel from '@nib-components/feature-panel';

Note: If you are using this component within a React Server Component (like the NextJS 13 App Router), it is suggested to import FeaturePanel and FeaturePanelFeature individually.

import FeaturePanel, {FeaturePanelFeature} from from '@nib-components/feature-panel';

import FeaturePanel, {FeaturePanelFeature} from from '@nib-components/feature-panel';
import {DentalGraphicIcon, AccidentGraphicIcon, AmbulanceGraphicIcon} from '@nib/icons';

<FeaturePanel title="Why nib health insurance is worth it">
  <FeaturePanelFeature icon={DentalGraphicIcon} title="Choose your Extras provider">
    For Extras like dental and physio, see any provider with professional qualifications recognised by nib.
  </FeaturePanelFeature>
  <FeaturePanelFeature icon={AccidentGraphicIcon} title="Accidental Injury Benefit">
    Seek treatment at a hospital Emergency Department within 24 hours of an accident &amp; if you need to be admitted, you'll receive benefits in line with our top hospital cover for the next 90 days.
  </FeaturePanelFeature>
  <FeaturePanelFeature icon={AmbulanceGraphicIcon} title="Emergency Ambulance">
    No annual limits on Emergency Ambulance transportation - excludes residents of QLD and TAS who have ambulance services provided by their State Ambulance Schemes.
  </FeaturePanelFeature>
</FeaturePanel>

Interactive demo

<FeaturePanel title="Why nib health insurance is worth it" space={2}>
  <FeaturePanel.Feature icon={DentalGraphicIcon} title="Choose your Extras provider">
    For Extras like dental and physio, see any provider with professional qualifications recognised by nib.
  </FeaturePanel.Feature>
  <FeaturePanel.Feature icon={AccidentGraphicIcon} title="Accidental Injury Benefit">
    Seek treatment at a hospital Emergency Department within 24 hours of an accident &amp; if you need to be admitted, you'll receive benefits in line with our top hospital cover for the next 90 days.
  </FeaturePanel.Feature>
  <FeaturePanel.Feature icon={AmbulanceGraphicIcon} title="Emergency Ambulance">
    No annual limits on Emergency Ambulance transportation - excludes residents of QLD and TAS who have ambulance services provided by their State Ambulance Schemes.
  </FeaturePanel.Feature>
</FeaturePanel>

Props

All props passed to <FeaturePanel/> will be applied to the underlying <Tiles> as attributes.

FeaturePanel

FeaturePanel.Feature

Considerations

The Feature Panel can be used to highlight any number of features, however 3 or 6 works best due to the three column layout of the component. We recommend including up to a maximum of 6 key features our users may care about.

There is a special two-column layout for Feature Panel's with 2 or 4 features if required.

Titles

Both the Feature Panel title and the title for each of the features are optional, though it is encouraged that both are included. Titles are best kept short.

Icons

A key visual for this component is the icon denoting each highlighted feature. Icons are required for each feature and must use a Graphic icon. When selecting an appropriate icon be sure to consider any existing uses and associations the icon has to prevent confusion for the user.

Icons can be hidden on small screens if required. This is done to reduce the height of the panel when the features are stacked into a single column on mobile.

Descriptions

Each feature should include a short description in addition to the icon and title. Often it is desired to be able to link to relevant pages for further information on a specific features, and that is fully supported. To do so, import our Link component and use within your feature description.

When writing descriptions, keep them to less than 200 characters. Do not include any other components as children except text and links - no buttons.

Color Tokens

The color tokens you can use for setting the color, background, iconFill, and iconAccentFill props are:

• trueGreen
• trueGreen80
• trueGreen60
• trueGreen40
• trueGreen20
• brightGreen
• brightGreen80
• brightGreen60
• brightGreen40
• brightGreen20
• sageGreen
• sageGreen80
• sageGreen60
• sageGreen40
• sageGreen20
• sunsetPink
• sunsetPink80
• sunsetPink60
• sunsetPink40
• sunsetPink20
• warmWhite
• warmWhite80
• warmWhite60
• warmWhite40
• warmWhite20
• clearWhite
• deepBlack
• white
• black

Related components

• Icons
• Link