Patterns
Last updated
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