Patterns

Patterns and components are the building blocks used to design our websites and apps.

We cover each pattern in detail; explaining the reasons behind our decisions, as well as general implementation rules and states. Within each component section there is a link to the corresponding component in Zeplin - where you can access the specifications needed to build them.

# For developers

Accordion

An accordion is a vertical list of headers, users interact to reveal or hide content within them

Breadcrumb

Breadcrumbs are a type of secondary navigation that inform users of their current location in relation to the entire site's hierarchy.

Buttons

Buttons allow users to take actions, and make choices, with a single tap or click.

Carousels

Carousels are groups of items that occupy the same horizontal real estate.

Cells

Cells are composed of items containing primary and supplemental actions, which are represented by icons and text

Checkbox

Checkboxes allow the user to select one or multiple options within a list.

Dropdown

A dropdown list allows the user the select one value from a list of options once the user has interacted with the dropdown control.

Error summary

An error summary is displayed at the top of a page to summarise any validation errors which have occurred in a form.

Icon buttons

Icon only buttons are used when the button is in component context and when there is no room for labelling

Links

We use links for low priority actions on a page, as well as within blocks of text.

Navigation

Navigation guides users through different parts of our websites or apps.

Radio button

Radio buttons are used to display a list of mutually exclusive options where the user can only select one option at any time.

Search

Search is a key part of our customer experience - it helps our customers quickly find what they are looking for

Sheets

Sheets are surfaces containing content that are anchored to the bottom of the screen

Tabs

Tabs allow for content of a similar context to be separated into different panes, which a user can view one at a time.

Input field

Input fields are individual elements that can be combined together to create a form.

Toggle

Toggles are used when there is a single setting with two states, on or off. They allow users to select options.

# For designers

We use a number of Sketch libraries that are linked together to create our designs and components. To download them, you will need access to the following folder:

NBUX Sketch Libraries

# NBUX Starter Kit

To get started, you can download a file with the artboards already set up:

Download Sketch File

NBUX Starter Kit

We recommend that this file should be added as a Sketch template, so that new designs can be started with the artboards and grids already set up. To save a Sketch template, just download this file and choose 'Save as Template' from the file menu within Sketch.

# Useful plugins

Camilo, for switching brands - required
Stark, for colour accessibility checks - required
Zeplin, for design handover - required
Automate sketch - optional
Renameit - optional
Styles generator - optional
Symbol organiser - optional

Accordion →