Step number


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.


Step Number Default


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

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



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


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


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: