Components

The building blocks of our design system. Each component meets a specific interaction or need and has been created to work together as patterns for repeated use.

Accordion

An accordion groups sections of related content that can be opened and closed.

Animation

Coming soon

Badge

Badges are used to inform users of a status or category.

Button

Clickable actions for users. Available in a variety of formats.

Breadcrumb

Breadcrumbs show where the user is within the navigational structure.

Cards

A multi-use container that holds information and actions for single topic.

Code panel

Coming soon

Display Conditional

Coming soon

Donation

Donation contains toggles and inputs for the user to make a donation.

Checkbox

Checkboxes allow the user to select an option or multiple, from a set of options.

Download card

A card variant that houses downloadable media and displays it’s data.

Dialog box

Dialog boxes are used to make the user aware of important information.

Heading

A typography component used to display text in different sizes and formats.

Hero

A summary of a pages content that sits at the top of a page.

Icon

Icons are used to provide additional meaning to a piece of content.

Image

Photos and illustrations that express the brand alongside text content.

List

A set of text objects in a bulleted, numbered or icon format.

Monetary breakdown

Coming soon

Navigation Control

An additional way the user can access content on a previous page.

Octopunct Dropzone

Coming soon

Progress tracker

Progress tracker displays the current status of an intended target via an API.

Quick Close

Coming soon

Blockquote

Quotes are used to style information to set them apart from plain text.

Span

Coming soon

Separator

A horizontal or vertical line which groups or divides content in layouts.

Pagination

Pagination allows the user to navigate multiple pages of content.

Progress indicator

A progress indicator displays the steps and progress through a journey.

Table

Used to organise data in an easy to understand format.

Tile

Tile is used to display related content next to primary content.