Skip to content
3.3.2

Villain Panel

Villain Panel is the antithesis of Hero Panel. It is often used towards the bottom of a page, and gives the user a summation of the page content. Villain Panel mirrors the full-width image of the Hero Panel, and can be used to reinforce the primary message and user action of the page, to offer an alternative user action, or to provide a catch-all action.

Installation

bash
npm install @nib-components/villain-panel

Usage

jsx
import VillainPanel from '@nib-components/villain-panel';

Interactive demo

Young family

You've started a family but there's room for more! You're looking for a cover that will include things like pregnancy and birth-related services that meets your family's needs.

jsx

Props

PropTypeDefaultDescription
images (required)objectImages for mobile, tablet and desktop screen sizes. All image sizes are required.
titlestringThe title of the villain panel.
titleComponentstringh2The component for the villain panel title. To ensure that you have a logical, semantic heading hierarchy.
alignstringleftOne of [left, right], The alignment of the content box on desktop.
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.

Alignment

The white content box can be left-aligned (by default) or right aligned, using the align prop. Be sure to check the alignment works with the imagery used without compromising important elements.

Content

If you are using a title, be sure to use the title prop to ensure the correct styling is applied. You can also add additional elements such as a CTA Link or Button.

While you can include 1-2 paragraphs of supporting information under the title, be sure not to include too much text in the white content box. The taller the box becomes, the more the background image will stretch.

Content placement

Please refer to the following images for guidance on the placement and order of children components.

Images

Creating image assets

You can use the Villain Panel image template (Photoshop) to create image assets suitable for the villain panel. Download the template and follow the README instructions to produce the required 3 assets.

Image content

You should follow nib brand guidelines for imagery selection when sourcing villain panel images. Desktop and tablet images should be panoramic-style images, following the size requirements below. Similar to our hero panel, important elements of the picture should not be in the bottom right quarter of the desktop image as they will be covered by the content box when on mobile.

Villain Panel - Desktop example
Example of a desktop Villain Panel.
Villain Panel - Tablet example
Example of a tablet Villain Panel.
Villain Panel - Mobile example
Example of a mobile Villain Panel.

Image sizes

All 3 image sizes are required. Images should adhere to the following dimensions and remain under the allowed file size limits:

Villain Panel does not support retina images.

Unlike Hero Panel, Villain Panel does not support retina images.
ImageDimensions (px)File size limit
Desktop1600x425100kb
Tablet640x28020kb
Mobile320x25010kb

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.

The browser treats background-image differently, and only downloads the required image for the screen size.