41Steps

Discrete lesson ticks — for a curriculum, where the unit is a lesson, not a percentage. The current tick carries a soft ring.

Use it for

"Lesson 3 of 12" on cards and headers

Not for

Continuous values — Progress bar

Default

markup

<span class="ns-visually-hidden">Lesson 3 of 6</span>
<ol class="ns-steps" aria-hidden="true" style="max-inline-size:14rem">
  <li class="ns-steps__tick" data-state="done"></li>
  <li class="ns-steps__tick" data-state="done"></li>
  <li class="ns-steps__tick" data-state="current"></li>
  <li class="ns-steps__tick"></li>
  <li class="ns-steps__tick"></li>
  <li class="ns-steps__tick"></li>
</ol>

Accessibility contract

Ticks are aria-hidden; one visually-hidden sentence carries the count