Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
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.


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


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

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

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


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