Skip to content

Components

Accordion

Collapsible content container that lets users show or hide sections on demand.

Alert

Display important messages to users with color-coded alert variants.

Asset Download

List of one or more downloadable assets

Backdrop

A backdrop is a semi-transparent overlay that dims the content behind a modal or popover.

Badge

Compact visual indicators used to highlight status, categories, or counts.

Buttons

Cards

Carousel

A carousel displays a sequence of slides in a scrollable track.

Chat messages

The building block of a conversational interface — aligned user and bot messages with optional AI suggestions.

Chip

Compact interactive buttons for selectable options like filters or categories.

Content

Foundation styles for CMS or otherwise long-form HTML content.

Count Indicator

Position read-out ("1 of 6") with previous and next icon buttons.

Divider

Visual element for separating content groups horizontally or vertically.

Dropdown

Energy Labels

Display energy efficiency ratings using standard EU energy label colors and styling.

Feature List

A compact list that presents key product attributes as scannable label / data pairs — specifications, service features, and plan comparisons.

Footer Navigation

A multi-column navigation region for the site footer, combining plain links, single-level link groups, and collapsible link groups.

Forms

Frame

Responsive container that maintains a consistent aspect ratio for images, video, and embeds.

Icon

Icons are small visual symbols used to represent actions, objects, or concepts.

Label

Small, non-interactive markers that categorise content or surface quick technical information.

Legal Banner

Renders a legal banner meeting national legal requirements, built from finance data supplied as props.

Link

List

Component for displaying navigation links or item lists with optional icons.

Logo

Displays the brand logo as a recognizable visual anchor, reinforcing brand identity and creating a consistent experience across the website.

Media

Modal

Overlay dialog that focuses attention on a specific task or content.

Platform Badge

Branded badges for linking to app stores and podcast platforms with automatic scheme support.

Search AI

Combines enterprise search data with a large language model to answer visitor questions in place.

Simple Header Bar

A dismissible announcement bar shown above the main navigation, carrying a short message, an optional CTA, and a close button.

Skeleton

Generic placeholder shapes that hold a page's layout while content loads.

Slider

Component for selecting values within a range using handles and track.

Slot

Gray placeholder box that visualizes where content will be placed in a layout.

Social follow

Footer social media links & badges.

Special Links

Footer link group built on Link, with support for internal and external destinations.

Tab Picker

Single-select control that borrows the tab strip's visual.

Table

Tables display structured data in rows and columns.

Tabs

Component for organizing content into separate switchable views.

Tag

Tags are compact labels used to categorize or highlight content.

Text Component

Renders plain or rich text, normalising markup for semantic correctness, accessibility, and consistent styling.

Toggletip

A small popup that reveals supplemental information next to its trigger — as a toggletip, opened by click or keyboard and able to hold interactive content, or as a tooltip, shown on hover or focus with short read-only text.