NS Design System
v3.0.0 · 257 tokens

46Leaderboard

Ranked standing for a cohort or a challenge. Mostly an exercise in restraint: a leaderboard is the one component in a learning product that can actively demotivate.

Use it for

  • A cohort with a shared goal and a defined period
  • Where the reader can see their own position

Not for

  • A podium with gold, silver and bronze — rank is a mono number, which is what it is
  • A top ten that cuts the reader off. If they are 340th, show them 340th
  • Anything with no end date: a permanent ranking is a permanent judgement

Cohort standing

The top three get a stronger ink and nothing else. The reader's row is pinned below the gap rather than hidden.

  1. 01Priya Raghavan12 modules4,820↑2
  2. 02Marcus Bell11 modules4,610↓1
  3. 03Aiko Tanaka11 modules4,455—
  4. · · ·
  5. 47You6 modules1,940↑9
markup
<ol class="ns-leaderboard">
  <li class="ns-leaderboard__row" data-rank="1"><span class="ns-leaderboard__rank">01</span><span class="ns-leaderboard__name">Priya Raghavan</span><span class="ns-leaderboard__meta">12 modules</span><span class="ns-leaderboard__score">4,820</span><span class="ns-leaderboard__move" data-dir="up">&uarr;2</span></li>
  <li class="ns-leaderboard__row" data-rank="2"><span class="ns-leaderboard__rank">02</span><span class="ns-leaderboard__name">Marcus Bell</span><span class="ns-leaderboard__meta">11 modules</span><span class="ns-leaderboard__score">4,610</span><span class="ns-leaderboard__move" data-dir="down">&darr;1</span></li>
  <li class="ns-leaderboard__row" data-rank="3"><span class="ns-leaderboard__rank">03</span><span class="ns-leaderboard__name">Aiko Tanaka</span><span class="ns-leaderboard__meta">11 modules</span><span class="ns-leaderboard__score">4,455</span><span class="ns-leaderboard__move">&mdash;</span></li>
  <li class="ns-leaderboard__gap">&middot; &middot; &middot;</li>
  <li class="ns-leaderboard__row" aria-current="true" data-rank="47"><span class="ns-leaderboard__rank">47</span><span class="ns-leaderboard__name">You</span><span class="ns-leaderboard__meta">6 modules</span><span class="ns-leaderboard__score">1,940</span><span class="ns-leaderboard__move" data-dir="up">&uarr;9</span></li>
</ol>

Accessibility contract

  • An ordered list, because the ordering is the entire content
  • Movement is an arrow AND a number — colour is the third signal, never the first
  • The reader's own row is aria-current and carries the same 2px brand edge as every other current-item in the system
  • Scores are tabular-nums and end-aligned, which is the one thing a leaderboard has to get right