Steps

A progress indicator for multi-step flows like checkout or onboarding. Uses aria-current="step" for the active step and .is-complete / .is-error state classes for completed or failed steps.

Horizontal steps

<div class="ln-steps">
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker">1</div>
    <div class="ln-steps__label">Cart</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker">2</div>
    <div class="ln-steps__label">Shipping</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item" aria-current="step">
    <div class="ln-steps__marker">3</div>
    <div class="ln-steps__label">Payment</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item">
    <div class="ln-steps__marker">4</div>
    <div class="ln-steps__label">Confirm</div>
  </div>
</div>

Cart

Shipping

Payment

Confirm

Vertical steps

<div class="ln-steps ln-steps--vertical">
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker">1</div>
    <div class="ln-steps__label">Account created</div>
    <div class="ln-steps__connector"></div>
  </div>
  <div class="ln-steps__item" aria-current="step">
    <div class="ln-steps__marker">2</div>
    <div class="ln-steps__label">Verify email</div>
    <div class="ln-steps__connector"></div>
  </div>
  <div class="ln-steps__item">
    <div class="ln-steps__marker">3</div>
    <div class="ln-steps__label">Set up profile</div>
  </div>
</div>

Account created

Verify email

Set up profile

Dot steps

<div class="ln-steps ln-steps--dots">
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker"></div>
  </div>
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker"></div>
  </div>
  <div class="ln-steps__item" aria-current="step">
    <div class="ln-steps__marker"></div>
  </div>
  <div class="ln-steps__item">
    <div class="ln-steps__marker"></div>
  </div>
</div>

Steps with color roles

<div class="ln-steps ln-steps--info">
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker">1</div>
    <div class="ln-steps__label">Upload</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item" aria-current="step">
    <div class="ln-steps__marker">2</div>
    <div class="ln-steps__label">Process</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item">
    <div class="ln-steps__marker">3</div>
    <div class="ln-steps__label">Done</div>
  </div>
</div>

<div class="ln-steps ln-steps--danger">
  <div class="ln-steps__item is-complete">
    <div class="ln-steps__marker">1</div>
    <div class="ln-steps__label">Select</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item" aria-current="step">
    <div class="ln-steps__marker">2</div>
    <div class="ln-steps__label">Confirm</div>
  </div>
  <div class="ln-steps__connector"></div>
  <div class="ln-steps__item">
    <div class="ln-steps__marker">3</div>
    <div class="ln-steps__label">Delete</div>
  </div>
</div>

Upload

Process

Done

Select

Confirm

Delete

Reference

Class	Description	Responsive
`.ln-steps`	Steps container (flex row)	No
`.ln-steps__item`	Individual step	No
`.ln-steps__marker`	Step number or icon circle	No
`.ln-steps__connector`	Line between steps	No
`.ln-steps__label`	Step label text	No
`.ln-steps__description`	Step description text	No
`.ln-steps--vertical`	Vertical stacked layout	No
`.ln-steps--dots`	Dot indicator style	No
`.ln-steps--compact`	Smaller markers	No