Step number

Purpose

Step number represents a stage of a course. The first number represents which week of the course it refers to, while the second number represents the step. So 1.1 refers to the first step of the first week, while 2.10 would be the tenth step of the second week.

Example

Step Number Default

Description

The default Step Number has no colour and is used for incomplete steps.

%span.a-stepnumber.media_icon.a-stepnumber 1.3

Variants

Done

Completed steps are blue, the colour that signifies the past tense. This component gives learners a sense of achievement and closure as they mark steps complete with the progress toggle.

%span.a-stepnumber.media_icon.a-stepnumber--done 1.1
Step Number Done

Current

The step a learner is currently on is pink, the colour that signifies the present and indicates where the learner is at now.

%span.a-stepnumber.media_icon.a-stepnumber--current 1.2
Step Number Current

Dark

Step Numbers on a grey background require a darker border to distinguish the border from the background.

%span.a-stepnumber.media_icon.a-stepnumber--dark 1.4
Step Number Dark

Added by: