Toggle menu

Framework Components

Details of the core components that make up the site frameworks, themes and templates.

The components library provides the standard building blocks that make up many of the elements used in our site themes and templates.

This developer documentation includes Java and .NET code samples, as well as the HTML generated. It is possible to use the HTML directly in your designs (eg the HTML form field) but you'll need to be able to maintain it should we release updates.

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

Disclosures are designed to offer a flexible way to create sections of a page that users can expand and collapse.

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.

Paging

The paging component provides navigation through pages, typically using next and previous buttons or page numbers.

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.

Site Logo

Site logos showcase your brand, giving users a clear, recognisable symbol that often links back to the homepage for easy navigation.

Site Search

Site searches are designed to make it easy for users to quickly find what they need.

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.