Rence Material
Github

Steppers

Steppers convey progress through numbered steps. They guide users through complex workflows and multi-step processes.

Guided Progress!

Horizontal Stepper

Checkout Flow
check
Step Name
2
Step Name
3
Step Name

Ideal for linear tasks like registration or checkout. Active steps are emphasized with the primary color.

Progress Indicator!
HTML
<!-- Horizontal Stepper -->
<div class="stepper-horizontal d-flex justify-content-between mb-5">
  <div class="step active d-flex flex-column align-items-center">
    <div class="step-circle bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width:32px;height:32px;">1</div>
    <span class="step-text small mt-2 fw-medium">Order Placed</span>
  </div>
  <div class="step-line flex-grow-1 mx-3" style="border-bottom: 2px solid #e2e8f0; margin-top: 16px;"></div>
  <!-- ... -->
</div>

Vertical Stepper

check
Select Campaign

Summer Sale selected

2
Ad Group

Create your audience

3
Finish

Vertical steppers are perfect for mobile views and narrow layouts.

Mobile Sequence!
HTML
<!-- Vertical Stepper -->
<div class="stepper-vertical">
  <div class="step d-flex gap-3 mb-1">
    <div class="d-flex flex-column align-items-center">
      <div class="rounded-circle bg-primary text-white p-1"><i class="material-icons" style="font-size:16px;">check</i></div>
      <div class="flex-grow-1 border-start border-2 ms-0 mt-1 mb-1"></div>
    </div>
    <div class="pb-4">
      <h6 class="mb-1 fw-bold">Inventory Check</h6>
      <p class="text-muted small">Completed</p>
    </div>
  </div>
</div>