Skip to content
LSD Framework
Component · trajectory

Steps

A stepper that knows where you've been, where you are, and where you're going. Numbered, iconic, vertical, compact — with a pulse on the current orbit and a fill that catches up as you advance.

01 · Horizontal · numbered with connector fill.lsd-steps
  1. Identifybrand · seed
  2. Composetokens · surfaces
  3. Wirebehaviours · aurora
  4. Shipexport · publish
02 · Vertical · side connector.lsd-steps--vertical
  1. Build artifact14s · cached
  2. Lint & type-checkpassed
  3. Run motion sweepaurora · 6/12 sequences
  4. Sign & deploypending
03 · Icons instead of numbers.lsd-steps__bullet · svg
  1. Packed
  2. In transit
  3. Out for delivery
  4. Delivered
04 · Compact · icon-only, label on hover.lsd-steps--compact

Hover or focus a node to reveal its label.

  1. Sign in
  2. Pick a brand
  3. Generate surfaces
  4. Apply & preview
  5. Export
05 · Live advance · click "Advance"data-state=advance
  1. Calibratetokens
  2. Composestack
  3. Animateaurora
  4. Publishorbit
View HTML — minimal markup 
<ol class="lsd-steps">
  <li class="lsd-steps__item" data-state="complete">
    <span class="lsd-steps__bullet"></span>
    <span class="lsd-steps__copy">
      <span class="lsd-steps__label">Identify</span>
      <span class="lsd-steps__hint">brand · seed</span>
    </span>
  </li>
  <li class="lsd-steps__item" data-state="current" aria-current="step">...</li>
  <li class="lsd-steps__item">...</li>
</ol>