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.
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.
Block
Blocks are designed to organise content into distinct sections, making it easier for users to navigate and focus on specific information.
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.
Card
Cards are designed to help display important information in a clear, eye-catching way while keeping the page easy to explore.
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.
Dialog
Dialogs are pop-up elements that appear over a page to show important content or options.
Disclosure (Detached)
Detached Disclosures provide a flexible way to create expandable sections with toggles and content placed separately on the page.
Grid
Grids help structure content into organised rows and columns, creating clean, responsive layouts that adapt seamlessly to different screen sizes.
Heading
Headings output the article heading text of an article.
Icons
Icons is a popular icon toolkit that provides scalable vector icons and social logos.
Introduction
Introduction will output an article's intro text.
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.
Tabs
Tabs are designed to organise content into easily navigable sections, letting users switch between them without leaving the page.
Tag
Tags are used to show users the status of process.