Skip to content
Mesh
4.0.2

Hero Panel

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.

Installation

bash
npm install @nib-components/hero-panel

Usage

jsx
import HeroPanel from '@nib-components/hero-panel';

Interactive demo

nib health insurance

Whether you're young and fit, health conscious, or just want peace of mind, we've got you covered.

jsx

Props

PropTypeDefaultDescription
title (required)stringThe title of the Hero Panel. Will be a h1, rendered at the heading size of 2 below the md breakpoint.
images (required)objectMultiple images for mobile, tablet and desktop, at 1x and 2x resolutions. All image sizes are required.
subTitlestringThe sub-title of the Hero Panel.
nextSectionBackgroundColorstringcolors.whiteThe background colour of the next section after the Hero Panel. Must be one of the Colors.

Images

Creating image assets

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.

Image content

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.

Image sizes

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:

ImageDimensionsFile size limit
[email protected]4000x1920400kb
Desktop2000x960150kb
[email protected]1600x1160150kb
Tablet800x58060kb
[email protected]800x60050kb
Mobile400x30025kb

Why background-images over img tags?

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.

CSS treats background-images differently, and only downloads the required image for the screen size.