Steps

An <ol data-steps> is a numbered run of stages across the page. data-state="done" ticks a finished step; aria-current="step" marks the one in hand.

Basic

<ol data-steps>
  <li data-state="done">Install atlas</li>
  <li data-state="done">Build the site</li>
  <li aria-current="step">Check the links</li>
  <li>Deploy</li>
</ol>

The numbers come from a CSS counter, so the list items hold nothing but their labels.

Notes

• A done step turns its circle into a tick in the go tone and colours the rule after it.
• aria-current="step" is the ARIA the reader needs; it also darkens the label and the circle.
• The current step's circle takes a darker rim than the steps around it.
• The steps share the width evenly, so four or five fit before the labels start to wrap.