The Feature Panel highlights a handful of key callouts. The Feature Panel is used to showcase our Unique Selling Points (USPs).
npm install @nib-components/feature-panel
Note: Feature Panel depends on the Icons component and therefore this package must be installed as well.
import FeaturePanel from '@nib-components/feature-panel';
Why nib health insurance is worth it
Choose your Extras provider
Accidental Injury Benefit
All props passed to
<FeaturePanel/> will be applied to the underlying
<Tiles> as attributes.
|node||Accepts any number of |
|string||The feature panel title.|
|string||The component for the feature panel title. To ensure that you have a logical, semantic heading hierarchy.|
|boolean||If you wish, you can hide the icons on mobile to match the default |
|number or object||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 |
|string||The color of the text (copy and headings) in the panel. Only available in the |
|string||The background color of the panel. Only available in the |
|string||The fill of the icons in the panel. Only available in the |
|string||The accent fill of the icons in the panel. Only available in the |
|node||The feature content.|
|component||The feature icon. Must be a valid Graphic icon defined in |
|string||The feature title.|
|string||The component for the feature title. To ensure that you have a logical, semantic heading hierarchy.|
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.
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.
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.
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.
The color tokens you can use for setting the
iconAccentFill props are: