Tutorial 16 · Structure

Timeline & Stepper

Show progress over time with lucUI timeline and stepper.

8 minBeginnerlucUI 2 · v2.1.3

Objectives

  • Render .luc-timeline.
  • Use .luc-stepper for checkout flows.

Steps

Timeline

Launch

lucUI 2 ships.

Iterate

Ship weekly.

timeline.html
<div class="luc-timeline">
  <article class="luc-timeline-item">
    <span class="luc-timeline-badge"></span>
    <h3 class="luc-timeline-title">Launch</h3>
  </article>
</div>

Stepper

Stepper shows ordered progress; combine with form steps.

← Previous Next →