Skip to content
4.1.0

Hero Panel

A Hero Panel features at the top of a page and acts to support the primary purpose of the page, which could be; to invite a user to further explore the content, to prompt a user to perform an action (when including a button) or simply to support the content of a page. The Hero Panel component works as a system offering three variations; Hero Full, Hero Condensed and Hero Text. These variations are designed to work together or standalone, and to provide maximum flexibility across a range of contexts and experiences.

Installation

bash
npm install @nib-components/hero-panel

Usage

jsx
import HeroPanel from '@nib-components/hero-panel';
It is highly recommended you refer to
Mesh breakpoints
as you decide on your particular Hero Panel implementation.

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.
imagesobjectMultiple images for mobile, tablet and desktop, at 1x and 2x resolutions. All image sizes are required. See images for more information on using this prop
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.
childrennodeYou are free to render any node as the children of this component. Common components include our Copy, Link and Button components. Please refer to Content placement below for guidance on order of elements.
variationstring or objectfullDifferent variations of the Hero Panel. Can be a string of "full", "condensed", or "text". Or an object consisting of (breakpoints)[https://github.com/nib-group/design-system/blob/master/packages/theme/src/common/index.js]. e.g { sm: 'text', md: 'condensed', lg: 'full'}

Hero Panel variations

The Hero Panel features a flexible system that is composed of three mobile-first responsive variations:

Hero FullHero CondensedHero Text
Displays an image at maximum allowed height with a bottom overlapping content box.Displays an image at reduced (or condensed) height with a bottom overlapping content box. The content box is positioned vertical-center within the image at breakpoint lg and above.Image is removed. Content box styling is simplified with the removal of left green border and box shadow.
Hero Panel - Variation example
From left to right; Hero Full, Hero Condensed and Hero Text at small breakpoint, including a button as a child node (see props).

Usage contexts

There are no hard rules set on Hero Panel usage, however the following scenarios may help with deciding which Hero Panel variation to use:

Hero Full

If the purpose of the page is to represent a product then the function of the Hero Panel is to lead a user to explore further page content. Consider using the Hero Full variation.

If the purpose of the page is to act as the main entry point into a site or group of pages, then the function of the Hero Panel is to visually represent the top level in a hierarchy. Consider using the Hero Full variation.

Hero Condensed

If the purpose of the page is to prompt a user to perform an action, such as get a quote, then the function of the Hero Panel is to inform and direct. Consider using the Hero Condensed variation and make sure to include a call-to-action (CTA) button.

Hero Text

If the purpose of the page is to inform or educate and the content is simple, then the function of Hero Panel is to provide a heading that supports the page content. Consider using the Hero Text variation.

Hero combination

There may be cases where even using the same page, the Hero Text variation would provide a better experience on mobile and the Hero Full variation would be a better experience for a desktop user — it is possible to use Hero Panel variations responsively in combination.

Responsive variations

The Hero Panel system is flexible enough that it is possible to use Hero Panel variations responsively in combination.

Pushing this flexible functionality you may have:

  • Hero Text variation only on mobile.
  • Hero Condensed variation on tablet.
  • Hero Full variation on desktop.
Hero Panel - Responsive variations example
Example of using responsive breakpoints

Used to represent page hierarchy

Hero Panel variations are useful when used to visually communicate page hierarchy along a user’s journey. You may use the Hero Full variation for the landing page, the Hero Condensed variation for child (or secondary) pages and the Hero Text variation for supporting (or tertiary) pages such as FAQs or help sections.

Images

Using the scenario under the [Responsive variations](/components/hero-panel/#Responsive variations) section, you would require the following images for the Hero Panel variations:

VariationExperienceBreakpointImage
Hero TextMobile> smNo image required
Hero CondensedTablet> mdImages required
Hero FullDesktop> xlImages required

Please see the image reference tables below for image specifications.

Image content

Please be mindful of the positioning and size of the content box when selecting imagery, as shown with the following example:

Hero Panel - Images example
Hero Panel - Images example

For help selecting imagery, please contact nib Design Communications team via email at [email protected] Further information can be found on the Mesh Foundations Imagery page.

Image sizes

Below are handy image reference tables. This chart is a guide only and we recommend that you pay special attention to the file size of the images you use.

Alert (info): The Hero Text variation does not require an image.

Hero Full

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

Hero Condensed

ImageDimensionsFile size limit
[email protected]4000x1200380kb
Desktop2000x600120kb
[email protected]1600x580120kb
Tablet800x29060kb
[email protected]800x30060kb
Mobile400x15020kb

###Photoshop

You can use the Photoshop or Sketch templates to create image assets suitable for the Hero Full and Hero Condensed variations. You will only need to create images and export for the corresponding Hero Panel sizes you require.

Download the template and follow the README instructions to produce the required assets.

Hero Full Photoshop template

Hero Condensed Photoshop template

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.