Skip to content

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.


npm install @nib-components/villain-panel


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

Interactive demo



images (required)objectImages for mobile, tablet and desktop screen sizes. All image sizes are required.
titlestringThe title of the villain panel.
titleComponentstring'h2'The underlying component of the villian-panel title.Must be one of h1, h2, h3, h4, h5, h6, div, label, span, header.
titleSizenumber or object{xs: 3, md: 2}The size of the villian-panel title. Must be one of 1, 2, 3, 4, 5, 6. Can be made responsive by passing an object of breakpoints.
alignstringleftOne of [left, right], The alignment of the content box on desktop.
boxPropsobject{}Props to be passed down to the underlying Box component wrapping the content of the panel. All Box props are valid.
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.


The 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.


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 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.


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 size variations
Villain Panel variations. From left to right; Desktop, Tablet, and Mobile screen size variations are shown.

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

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.