Atoms

Buttons

Simple elements that enable a user to register an action.

Links

Inline links are used to link to a specific anchor on a page, a new page or tab.

Conversational elements

These are the elements that create our conversational application form.

Form elements

All the elements including validation for creating form inputs.

Definition List

Form Validation

Text Bubble

Page Heading

Progress Bar

We use two types of progres bar to indicate to a user their progression through a task.

Horizonal Rule

Used to break page up large areas of content and help provide focus.

Conversation Inputs

Inputs that mimic a messenger interface and allow user to submit answers.

Elevated Panels

Used to create an illusion of depth in a 2D and draws a user's attention.

Colour Band

A band of colour that sits below the navigation and contains the page context.

Tooltips

Text which shows on hover of an information icon

Sturgeon

We use the sturgeon as a primary means of progressing through the user journey.

Loaders

Loaders are used to indicate progress to the user.

Trustpilot Stars

A group of stars styled like Trustpilots. These are not dynamic.

Tags

Standard tags. An example usage is in stock search

Review Stars

A set of dynamic review stars.

Radial Chart

A static, circular, visual representation of a given statistic.

Lists

Bullet lists, Ordered lists and Icon lists

Phone Number