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.

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.

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.

Link

List

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

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.

Popover

A floating content container that appears relative to a trigger element, displaying contextual information or interactive content.

React

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.

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.