A set of reusable components powered by code within our site frameworks, alongside HTML component patterns.
The components library provides the standard building blocks that make up many of the elements used in our site themes and templates.
You can use the HTML directly in your designs and the components will be styled and behave consistently with the rest of your website.
Accordion
Accordions are a group of related content sections that users can expand or collapse.
Alert
Alerts are designed to inform you about important updates or changes on a page, drawing your attention without interrupting what you're currently doing.
Autocomplete
Autocompletes are text inputs that display lists of suggested terms below as users type, allowing them to select from relevant options.
Button
Buttons make it easy for users to take action on a page, helping them navigate or complete tasks with a single click.
CTA Links
CTA (Call to Action) links help users navigate or complete tasks with a single click.
Carousel
Carousels are a set of content panels that users can browse through, either automatically or by manually clicking to navigate.
Date
Dates are essential for conveying deadlines, appointments, or time-related information.
Description List
Description lists are a way to organise terms and definitions, making content easier to scan and understand at a glance.
Details
Details are expanding or collapsing sections of content and provide a compact way to display additional information.
Disclosure (Detached)
Detached Disclosures provide a flexible way to create expandable sections with toggles and content placed separately on the page.
Icons
Icons is a popular icon toolkit that provides scalable vector icons and social logos.
Loader
Loaders give visual feedback to users, indicating that content is being processed or loaded.
NVP
NVPs (Narrative Visualisation Patterns) are used to help organise information into a clear format that can be understood at a glance.
Quote
Quotes are used to highlight and present quoted text in a visually distinct format, making it easy to recognise and understand at a glance.
Summary Block
Summary blocks can be used to display data in a structured but flexible way across products.
Table
Tables provide a structured way to present data, allowing users to view and compare information easily.
Tag
Tags are used to show users the status of process.
Share this page
