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';
|object||Images for mobile, tablet and desktop screen sizes. All image sizes are required.|
|string||The title of the villain panel.|
|string||The underlying component of the villian-panel |
|number or object||The size of the villian-panel |
|string||One of [|
|object||Props to be passed down to the underlying Box component wrapping the content of the panel. All Box props are valid.|
|node||You 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.
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.
Please refer to the following images for guidance on the placement and order of
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.
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.
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.
|Image||Dimensions (px)||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.
The browser treats
background-image differently, and only downloads the required image for the screen size.