Framework Components

Accordions are a group of related content sections that users can expand or collapse.

Alerts are designed to inform you about important updates or changes on a page, drawing your attention without interrupting what you're currently doing.

Autocompletes are text inputs that display lists of suggested terms below as users type, allowing them to select from relevant options.

Blocks are designed to organise content into distinct sections, making it easier for users to navigate and focus on specific information.

Buttons make it easy for users to take action on a page, helping them navigate or complete tasks with a single click.

CTA (Call to Action) links help users navigate or complete tasks with a single click.

Cards are designed to help display important information in a clear, eye-catching way while keeping the page easy to explore.

Carousels are a set of content panels that users can browse through, either automatically or by manually clicking to navigate.

Dates are essential for conveying deadlines, appointments, or time-related information.

Description lists are a way to organise terms and definitions, making content easier to scan and understand at a glance.

Details are expanding or collapsing sections of content and provide a compact way to display additional information.

Dialogs are pop-up elements that appear over a page to show important content or options.

Detached Disclosures provide a flexible way to create expandable sections with toggles and content placed separately on the page.

Grids help structure content into organised rows and columns, creating clean, responsive layouts that adapt seamlessly to different screen sizes.

Headings output the article heading text of an article.

Icons is a popular icon toolkit that provides scalable vector icons and social logos.

Introduction will output an article's intro text.

Loaders give visual feedback to users, indicating that content is being processed or loaded.

NVPs (Narrative Visualisation Patterns) are used to help organise information into a clear format that can be understood at a glance.

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 blocks can be used to display data in a structured but flexible way across products.

Tables provide a structured way to present data, allowing users to view and compare information easily.

Tabs are designed to organise content into easily navigable sections, letting users switch between them without leaving the page.

Tags are used to show users the status of process.