A NSW Government website
Design System v3.18.3

Steps

Create a visual journey or link between sections of content.

Usage

Use steps to draw a connection for the user between linear pieces of information.

Examples include:

  • Steps or stages of a process
  • Sequential dates or outcomes

Step types

Steps use colours from your brand palette, displayed as outlined or filled. Counters can also be added where they correspond to the content. Colour selection should take into considertation the contrast with the content background.

Based on your heading class, small and medium sized steps are available to ensure the component remains visually balance.

When to avoid

Do not use when content doesn't come together in sequential or linear order, consider bullets points instead.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Outline

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Fill

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Outline with counters

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Fill with counters

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Heading size

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.

Discovery

Understand your users, their challenges, and what motivates their behaviour.

Alpha

Test hypotheses and different approaches with users rapidly to determine how to best meet identified user needs.

Beta

Turn best-performing prototype into a working “minimum viable product” - the quickest and simplest version of a service to meet basic user needs and provide value.