Patterns

Image Cards section

Three cards with images displayed in a section with heading and introduction. Used for important information.

Components: Section (thirds), 3 images cards

Four cards with icons displayed in a section with heading and introduction. Used for important tasks.

Components: Section (quarters), 4 icon cards

Section demonstrating accessible background.

Components: Section (100), Content, Image Background Modifier

Section demonstrating a colour option with texture variant.

Components: Section (100), Content

Section demonstrating one of the header variants with it on the side.

Components: Section (6-6), Content

Statistics with animations displayed in a section. Used for conveying important, convincing, numerical data for key insights.

Components: Section (thirds), 3 stats

Collapsible accordions convey important information in a compact way. Used for checklists of data which require further explanation.

Components: Section (100), Accordion group and 4 accordions

List of logos of organisions. Used to showcase affilations and to validate the offerings of the website.

Components: Section (3-1-8), Logo cloud*

Powerful slider section showcasings a list of items presenting key information.

Components: Section (100), Slider*

Simple hero with heading content and call to action link. Used for clear messaging.

Components: Hero, cp:Primary

Attractive hero with background image, heading content and call to action link. Used eye catching display at top of landing pages.

Components: Hero, cp:Primary

Compelling hero with parallax background images, heading content and call to action link. Used for playful and attractive content.

Components: Hero, cp:Primary

Visual and arresting hero with background video, heading content and call to action link. Used for capturing the user's imagination and attention.

Components: Hero, cp:Primary

Last updated 7 months ago