Components

Allows users to take actions, and make choices, with a single tap.

Checkboxes are selection controls that allow users to select one or multiple items from a group of options. They typically appear in forms.

The form component allows users to enter and edit information into a UI using form controls; based on React Hook Form.

Radio Buttons are selection controls that are typically used in forms

Select components allow users to select one option from a list.

Allows users to choose a single value or range between min and max values by sliding a thumb.

A switch is a selection control (toggle) that allows users to turn a setting on or off.

Text Fields allow users to enter and edit text content into a UI. They typically appear in forms.

Text areas allow users to enter and edit multi-line text. They typically appear in forms.

Communicates essential information without blocking an experience.

A flag is a non-interactive visual indicator used to communicate status.

Demonstrates the progress of a system action e.g. waiting for a page to load.

A Toast communicates confirmation of an action or a low-priority message that does not need to completely interrupt the user experience.

An Inline message communicates contextual information. They are positioned inline, in close proximity to the element they are adding context to.

A Tooltip is a feedback component that displays a short, informational message when a user hovers over or focuses on a UI element.

Character count lets users know how much text they can enter in an input container as they type.

A simple container component that can take margin, padding, and style presets.

Contain preview content and actions about a single subject.

Cards contain preview content and actions relating to a specific subject.

A thin line that separates content.

A layout panel that slides out the side of the screen revealing content like navigation or filters.

The Fieldset is used to provide contextual information around a group of form controls in a web form.

The grid and cell are used together to construct a visual grid for responsive page layout.

Used to construct a visual grid for responsive page layout. A Proxy for CSS grid.

A Modal is a layout panel that presents critical information or requests users input without navigating away from the current page.

A Popover (also known as a Popper) is a layout component that displays non-critical information when a user clicks or taps on a UI element.

A low-level foundational component used to layout items in a horizontal or vertical stack.

The Structured List is a layout component that groups similar or related content.

A pair of components which can be used to show and hide content at different breakpoints.

Layers allow for the stacking of components and other elements, giving control over how they interact together and appear to users.

The audio player component allows a user to play and control the playback of live and recorded audio content.

Small SVG shapes, ranging from basic UI shapes to brand logos.

Images are a type of visual media. They can appear at fixed sizes, percentages, and aspect ratios.

The video player component allows a user to play and control video content.

Accordions show and hide related content. Use them to break up long pages into segmented, prioritised sections.

Breadcrumbs are used for secondary navigation.

Links allow users to navigate to a new location or to additional information.

A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.

Pagination lets users navigate through multiple pages.

The scroll component adds scroll behaviour to overflowed content.

Allows users to alternate between views within the same context.

Tags are used to classify content, typically using keywords.

Provides context and actions related to a particular section of content that follows below on the screen.

A small line of text which lists the authors of an article, along with their titles if provided.

A sentence often added to an image or video to describe or explain what the image or video is showing.

Element for displaying dates, usually publication dates on news articles.

A simple component that is comprised of two elements a Kicker, and a Heading.

Ordered lists make blocks of text easier to read, structuring sequential information into manageable, numbered items.

An introductory paragraph in an article, which summarises the article’s content.

Text block provides a simple way to display text. It supports text cropping, style presets, and typography presets.

Unordered lists make blocks of related text easier to read, structuring information of equal value into manageable bulleted items.

We welcome contributions of code, design and guidance.

Contributions are shared and maintained by contributing teams.

Non-visual component which embeds the consent management script.

A link which opens the consent manager dialog, requires the Consent component.

Non-visual component which embeds the client-side experimentation script.

Non-visual component which embeds the Tealium tag manager script.

The aspect ratio of an image.

Used anywhere a user would like to easily share something with social media.

Lets users enter and edit text.

Allows user to mute, increase or lower audio volume.