Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Patterns

Patterns are best practice design solutions for specific user-focused tasks and page types.

All of the patterns in this section are supported by written guidance and contain coded examples where possible. If you are using the developers assets and the code in our documentation, coded examples will render the same as in the Design System.

Patterns often use one or more components and explain how to adapt them to the context.

Use the links on this page to navigated to the desired pattern.

Ask users for

Addresses

Follow this pattern whenever you need to ask for an address.

Bank details

Follow this pattern whenever you need to ask for bank details.

Currency amount

Follow this pattern whenever you need to display or ask users for an amount of money.

Dates

Follow this pattern whenever you need users to provide or view a date as part of your service.

Email

Follow this pattern whenever you need to ask for an email address.

Gender or sex

Follow this pattern whenever you need to ask for gender or sex.

Names

Follow this pattern whenever you need to ask for a user’s name .

Numeric inputs

Follow this pattern whenever you need to ask for numeric inputs.

Social Insurance Numbers

Follow this pattern whenever you need to ask for social insurance numbers.

Telephone numbers

Follow this pattern whenever you need to ask for a telephone number.

Help users

Confirm an email address

Check that a user has access to a specific email account using an email confirmation loop.

Confirm a phone number

Check that a user has access to a specific mobile phone number.

Contact a department or service team

Give users contact information within your service or website.

Filter results

Help users filter results.

Add multiple things

Let users add items of the same type

Pages

Check answers page

Let users check their answers before submitting information to a service.

Confirmation pages

Use this page to let users know they’ve completed a transaction.

Cookies page and cookies consent

Tell users about the cookies you’re setting on their device and let them accept or reject different types of non-essential cookies.

Page not found pages

Use a page not found if someone is trying to view a page that does not exist

Question pages

This pattern explains when to use question pages and what elements they need to include.

Service unavailable pages

Use this page to tell users that a service is unavailable on purpose.

Step by step navigation

Use the step by step navigation page to present an end to end journey in logical steps.

Task list page

Use this page to help users understand the tasks involved in a completing a service and when they’ve completed them.

There is a problem with the service pages

Use this page to tell users there is something wrong with the service.

How to

Focus state

Let users know which element they’re currently on and is ready to be interacted with.

Labels and legends

How to use labels and legends for single and multiple questions on a page.

Structuring a service

This pattern explains how to structure an online service.