Toggle menu

Framework Components

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.

Share this page

Facebook icon Twitter icon email icon

Print

print icon