Hero Panel gives users a quick understanding of the purpose of a page and encourages them to continue reading. It includes an image and a title, as well as an optional short description summarising the content in the page.
npm install @nib-components/hero-panel
import HeroPanel from '@nib-components/hero-panel';
nib health insurance
Whether you're young and fit, health conscious, or just want peace of mind, we've got you covered.
|string||The title of the Hero Panel. Will be a |
|object||Multiple images for mobile, tablet and desktop, at 1x and 2x resolutions. All image sizes are required.|
|string||The sub-title of the Hero Panel.|
|string||The background colour of the next section after the Hero Panel. Must be one of the Colors.|
You can use the Hero Panel image template (Photoshop) to create image assets suitable for the hero panel. Download the template and follow the
README instructions to produce the required 6 assets.
Please follow nib brand guidelines for imagery selection when sourcing hero panel images. Desktop images should keep the focal point to the right to ensure important visual elements are not concealed by the green box. Similarly, important elements of the picture should not be in the bottom right quarter of the desktop image as they will be covered by the text box.
All 6 image sizes are required by the hero panel. Images should adhere to the following dimensions and remain under the allowed file size limits:
|Image||Dimensions||File size limit|
Image tags with a
src attribute are always downloaded by the browser. We do not want our desktop users to have to download 2 images they are not even going to see.
background-images differently, and only downloads the required image for the screen size.