NS Design System
v3.0.0 · 257 tokens

76List

The terminal-row list — this system's way of rendering any collection: mono index, title, meta on the right, one hairline rule per row. Hover draws the 2px left accent. Curriculum, search results, drafts — all this one component.

Use it for

  • Any ordered collection — lessons, results, files, students
  • Linked rows — the whole row is the link

Not for

  • Prose bullet points — that is ul/ol inside .ns-prose (see Elements)
  • Two-dimensional data — Table

Indexed

The mono index is a first-class element — the numbering IS the design.

01What is an org?video · 08:12
02Objects & fieldsvideo · 12:40
03Your first automationlab · 20:00
markup
<div class="ns-list" style="inline-size:100%;max-inline-size:30rem">
  <div class="ns-list__row"><span class="ns-list__index">01</span><span class="ns-list__title">What is an org?</span><span class="ns-list__meta">video · 08:12</span></div>
  <div class="ns-list__row"><span class="ns-list__index">02</span><span class="ns-list__title">Objects &amp; fields</span><span class="ns-list__meta">video · 12:40</span></div>
  <div class="ns-list__row"><span class="ns-list__index">03</span><span class="ns-list__title">Your first automation</span><span class="ns-list__meta">lab · 20:00</span></div>
</div>

Linked rows

Real anchors; hover shows the left accent line.

01Apex basics12 lessons 02Flows9 lessons
markup
<div class="ns-list" style="inline-size:100%;max-inline-size:30rem">
  <a class="ns-list__row" href="#"><span class="ns-list__index">01</span><span class="ns-list__title">Apex basics</span><span class="ns-list__meta">12 lessons</span><i class="ph ph-caret-right ns-list__chev" aria-hidden="true"></i></a>
  <a class="ns-list__row" href="#"><span class="ns-list__index">02</span><span class="ns-list__title">Flows</span><span class="ns-list__meta">9 lessons</span><i class="ph ph-caret-right ns-list__chev" aria-hidden="true"></i></a>
</div>

With status

01Setup & navigationComplete
02Data modelingIn progress
03Security modelNot started
markup
<div class="ns-list" style="inline-size:100%;max-inline-size:30rem">
  <div class="ns-list__row"><span class="ns-list__index">01</span><span class="ns-list__title">Setup &amp; navigation</span><span class="ns-list__meta"><span class="ns-status ns-status--success">Complete</span></span></div>
  <div class="ns-list__row"><span class="ns-list__index">02</span><span class="ns-list__title">Data modeling</span><span class="ns-list__meta"><span class="ns-status ns-status--info">In progress</span></span></div>
  <div class="ns-list__row"><span class="ns-list__index">03</span><span class="ns-list__title">Security model</span><span class="ns-list__meta"><span class="ns-status ns-status--idle">Not started</span></span></div>
</div>

Boxed

The same list inside the card frame, for placement on sunken pages.

01Intro to Lightning08:12
02App builder14:03
markup
<div class="ns-list ns-list--boxed" style="inline-size:100%;max-inline-size:30rem">
  <div class="ns-list__row"><span class="ns-list__index">01</span><span class="ns-list__title">Intro to Lightning</span><span class="ns-list__meta">08:12</span></div>
  <div class="ns-list__row"><span class="ns-list__index">02</span><span class="ns-list__title">App builder</span><span class="ns-list__meta">14:03</span></div>
</div>

Accessibility contract