Panel

Please note: This pattern contains design examples and implementation rules. Front-end code is coming soon!

Overview

Panels are sections of a web page that use different coloured backgrounds to distinguish between different types of content. The height of the active area is flexible to fit the content. Background colours must alternate between white and a colour. Two coloured panels should never be next to each other. Also, coloured backgrounds are to stretch the full width.

Example: Basic use of panels

Panel

Usage

Panel active area can accommodate various types of content. The basic style of displaying information in panel active area is to have a title, body (i.e. paragraph, boxes) and CTA (call to action). Panel active area can contain text, images and boxes.

Panel active area can be centre aligned in the panel with minimum paddings.

Within the text, headers use H2 font sizing. There must be noticeable colour contrast between headers and paragraphs with using different colours. All colours used need to meet accessibility colour standards.

Panel with text - full width

Text can be aligned in the centre within the colour block with presenting minimum paddings at the top and bottom. Always check that the background colour and text colour meet accessibility standards.

Panel

Panel - 2 column

The columns are aligned vertically with minimum padding and placed in the centre of the panel. Always check that the background colour and text colour meet accessibility standards.

Panel

Panel - 3 column

The columns are aligned vertically with minimum padding and placed in the centre of the panel. Always check that the background colour and text colour meet accessibility standards.

Panel

Panel with image

Size of images in the panel active area can be adjustable.

Full bleed image

For supplied images (that are not within a lens), fill the height of the panel when possible. Text can be aligned vertically within the colour block next to the image as long as the minimum padding at the top and bottom is present. Always check that the background colour and text colour meet accessibility standards.

Panel

Nested image

For supplied images that need to be used on a white background (ie. logos), rest the image within the panel. Always check that the background colour and text colour meet accessibility standards.

Panel

Panels with a box

Box should be placed in the centre of the panel active area. Information in a box can have basic style as a combination of a title, information area, and CTA.

Box on a coloured background

Panel

Coloured box on a white background (a box within a box on a white background)

Panel