102Track
The header of a curriculum: what it is, and how far in you are. Progress is over modules, not units — a learner thinks in “3 of 8 modules”, and a percentage over 60 units is a number nobody can act on.
Use it for
- The top of a training track — Salesforce Administrator, Developer
- Where the reader decides whether to start or resume
Not for
- A course — a course is a playlist and uses Course hero
- A single module's page — that is Module head
Track header
// Training track
Salesforce Administrator
Everything an admin is expected to know, in the order the platform actually teaches it — objects and fields before automation, security before sharing.
markup
<header class="ns-track">
<div class="ns-track__body">
<span class="ns-track__kicker">// Training track</span>
<h1 class="ns-track__title">Salesforce Administrator</h1>
<p class="ns-track__lede">Everything an admin is expected to know, in the order the platform actually teaches it — objects and fields before automation, security before sharing.</p>
</div>
<div class="ns-track__meta">
<div class="ns-track__stat"><b>3/8</b>Modules</div>
<div class="ns-track__stat"><b>62%</b>Complete</div>
<div class="ns-track__stat"><b>14h</b>Remaining</div>
</div>
</header>Accessibility contract
- The stat figures are real text, so the numbers are selectable and announced
- Mono numerals are tabular so the stat row does not jitter as values change