Feature Panel
The Feature Panel highlights a handful of key callouts. The Feature Panel is used to showcase our Unique Selling Points (USPs).
Installation
npm install @nib-group/mesh-feature-panel
Note: Feature Panel depends on the Icons component and therefore this package must be installed as well.
Usage
import FeaturePanel, {FeaturePanelFeature} from '@nib-group/mesh-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
FeaturePanelandFeaturePanelFeatureindividually rather than as a single import and subcomponentFeaturePanel.Feature.
import FeaturePanel, {FeaturePanelFeature} from '@nib-group/mesh-feature-panel';import {DentalGraphicIcon, AccidentGraphicIcon, AmbulanceGraphicIcon} from '@nib-group/mesh-icons';
Interactive demo
<FeaturePanel title="Why nib health insurance is worth it" space={2} sentiment="warm">
<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 & 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>
Props
All props passed to <FeaturePanel/> will be applied to the outer layer <Box>, except for those passed to internal components.
FeaturePanel accepts Box props
The outer layer of the Feature Panel is a Box component, and so you can apply sentiment and prominence directly to the Feature Panel.
FeaturePanel
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | node | Accepts any number of <FeaturePanelFeature>'s as children but it is recommended to have 3 or 6 features for the three-column layout to work best. | |
title | string | The feature panel title. | |
titleComponent | string | h2 | The component for the feature panel title. To ensure that you have a logical, semantic heading hierarchy. |
displayIcons | boolean | true | If you wish, you can hide the icons on mobile to match the default <6.0.0 behavior. |
space | number or object | 0 | Spacing value to be passed to internal Tiles component. A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 1...10. |
columns | number or object | The number of columns. Can be made responsive by passing an object of breakpoints. By default the number columns is calculated from the number of features added. | |
foreground | string | default | The color of the text (copy and headings) and icons in the panel (unless iconFill is specified). Can be any valid foreground color. |
background | string | default | The background color of the panel. Can be any valid background color. |
iconFill | string | The fill of the icons in the panel. Can be any valid foreground color. | |
containerWidth | string or object | Sets the maximum width of the container. Must be one of narrow, default or wide. Can be made responsive by passing an object of breakpoints. |
FeaturePanelFeature
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | node | The feature content. | |
icon (required) | component | The feature icon. Must be a valid Graphic icon defined in @nib-group/mesh-icons. | |
title | string | The feature title. | |
titleComponent | string | h3 | The component for the feature title. To ensure that you have a logical, semantic heading hierarchy. |
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.
Columns
The Feature Panel is designed to be used in a three column layout, however if you have 2 or 4 features, the component will automatically adjust to a two column layout. This is done to ensure that the features are still easy to read and understand.
Why nib health insurance is worth it
Accidental Injury Benefit
Seek treatment at a hospital Emergency Department within 24 hours of an accident & if you need to be admitted, you'll receive benefits in line with our top hospital cover for the next 90 days.
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.
If you require some other configuration, you can use the columns prop to set the number of columns you require. This can be a number or an object of breakpoints and is passed down to the underlying Tiles component. This can be useful if you want to have a single column layout on all screen sizes:
<FeaturePanel title="Why nib health insurance is worth it" space={2} columns={1}>
Why nib health insurance is worth it
Choose your Extras provider
For Extras like dental and physio, see any provider with professional qualifications recognised by nib.
Accidental Injury Benefit
Seek treatment at a hospital Emergency Department within 24 hours of an accident & if you need to be admitted, you'll receive benefits in line with our top hospital cover for the next 90 days.
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.
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
The Feature Panel supports both foreground and background colors. The foreground color applies to the text and icons in the panel and the background color applies to the background of the panel. If you wish to set the color of the icons independently of the text, you can use the iconFill prop to set the fill color of the icons explicitly.
All valid background and foreground color options are listed in the Colors foundations page. The default color for both foreground and background is default.
Given the outer layer of the Feature Panel is a Box component, you can also apply sentiment and prominence directly to the Feature Panel and see the colors update accordingly.