NS Design System
v3.0.0 · 257 tokens

44Timeline

A vertical feed of things that happened: course activity, a changelog, a learner's history. Every entry is stamped with a mono time — the time is data, the title is writing.

Use it for

  • Activity, history, audit trails, changelogs
  • Reverse-chronological by convention

Not for

  • A flow the reader is inside and can finish — that is Stepper
  • A list they can act on — that is Curriculum or List
  • Anything where every entry is 'current'

With icons

An icon in place of the dot, when the KIND of event matters as much as the fact of it. The icon sits on the surface so the rail appears to pass behind it.

  1. Today 09:14
    Deployed v3.0.0
  2. 12 Jan
    Review approved
  3. 04 Jan
    Comment from Priya
markup
<ol class="ns-timeline ns-timeline--icons">
  <li class="ns-timeline__item" data-state="current"><span class="ns-timeline__icon" aria-hidden="true"><i class="ph ph-rocket-launch"></i></span><span class="ns-timeline__time">Today 09:14</span><div class="ns-timeline__title">Deployed v3.0.0</div></li>
  <li class="ns-timeline__item" data-state="done"><span class="ns-timeline__icon" aria-hidden="true"><i class="ph ph-check-circle"></i></span><span class="ns-timeline__time">12 Jan</span><div class="ns-timeline__title">Review approved</div></li>
  <li class="ns-timeline__item"><span class="ns-timeline__icon" aria-hidden="true"><i class="ph ph-chat-circle"></i></span><span class="ns-timeline__time">04 Jan</span><div class="ns-timeline__title">Comment from Priya</div></li>
</ol>

Horizontal

A run of milestones on one rail. Scrolls rather than wraps — a wrapped timeline stops being a timeline. Takes a time and a title, nothing longer.

  1. Q1
    Admin track live
  2. Q2
    Developer track
  3. Q3
    Certification prep
  4. Q4
    Architect track
markup
<ol class="ns-timeline ns-timeline--horizontal">
  <li class="ns-timeline__item" data-state="done"><span class="ns-timeline__dot" aria-hidden="true"></span><span class="ns-timeline__time">Q1</span><div class="ns-timeline__title">Admin track live</div></li>
  <li class="ns-timeline__item" data-state="done"><span class="ns-timeline__dot" aria-hidden="true"></span><span class="ns-timeline__time">Q2</span><div class="ns-timeline__title">Developer track</div></li>
  <li class="ns-timeline__item" data-state="current"><span class="ns-timeline__dot" aria-hidden="true"></span><span class="ns-timeline__time">Q3</span><div class="ns-timeline__title">Certification prep</div></li>
  <li class="ns-timeline__item"><span class="ns-timeline__dot" aria-hidden="true"></span><span class="ns-timeline__time">Q4</span><div class="ns-timeline__title">Architect track</div></li>
</ol>

Activity

  1. Today 09:14
    Started “Testing Apex”

    Lesson 1 of 6.

  2. 12 Jan 16:02
    Completed “Apex triggers in depth”

    Certificate issued.

  3. 04 Jan 11:30
    Enrolled
markup
<ol class="ns-timeline">
  <li class="ns-timeline__item" data-state="current">
    <span class="ns-timeline__dot" aria-hidden="true"></span>
    <span class="ns-timeline__time">Today 09:14</span>
    <div class="ns-timeline__title">Started “Testing Apex”</div>
    <p class="ns-timeline__text">Lesson 1 of 6.</p>
  </li>
  <li class="ns-timeline__item" data-state="done">
    <span class="ns-timeline__dot" aria-hidden="true"></span>
    <span class="ns-timeline__time">12 Jan 16:02</span>
    <div class="ns-timeline__title">Completed “Apex triggers in depth”</div>
    <p class="ns-timeline__text">Certificate issued.</p>
  </li>
  <li class="ns-timeline__item">
    <span class="ns-timeline__dot" aria-hidden="true"></span>
    <span class="ns-timeline__time">04 Jan 11:30</span>
    <div class="ns-timeline__title">Enrolled</div>
  </li>
</ol>

Accessibility contract

  • An ordered list, because the order is the meaning
  • data-state drives the dot; only the entry still happening takes the signal colour — a feed where every dot is brand blue has no emphasis at all
  • Times are tabular-nums so a column of them aligns