MStoreComponents
Live previewDocsBuy now

Steps

—  Series of steps or conditions that the user needs to complete in order to accomplish a goal.

Steps with indicator

<!-- Steps with indicator -->
<div class="steps">
  <div class="steps-body">
    <a class="step has-indicator step-completed">
      <span class="step-indicator">
        <i data-feather="check"></i>
      </span>
      Address
    </a>
    <a class="step has-indicator step-active">
      <span class="step-indicator">2</span>
      Shipping
    </a>
    <a class="step has-indicator">
      <span class="step-indicator">3</span>
      Payment
    </a>
    <a class="step has-indicator">
      <span class="step-indicator">4</span>
      Review
    </a>
  </div>
</div>
// Steps with indicator
.steps
  .steps-body
    a(href="#").step.has-indicator.step-completed
      span.step-indicator
        i(data-feather="check")
      | Address
    a(href="#").step.has-indicator.step-active
      span.step-indicator 2
      | Shipping
    a(href="#").step.has-indicator
      span.step-indicator 3
      | Paymenticonp.has-indicator
      span.step-indicator 4
      | Review

Steps with icon

<!-- Steps with icon -->
<div class="steps">
  <div class="steps-body">
    <a class="step step-completed">
      <span class="step-indicator">
        <i data-feather="check"></i>
      </span>
      <span class="step-icon">
        <i data-feather="shopping-cart"></i>
      </span>
      1. Shopping cart
    </a>
    <a class="step step-active">
      <span class="step-icon">
        <i data-feather="user"></i>
      </span>
      2. Your details
    </a>
    <a class="step">
      <span class="step-icon">
        <i data-feather="credit-card"></i>
      </span>
      3. Payment
    </a>
    <a class="step">
      <span class="step-icon">
        <i data-feather="check-circle"></i>
      </span>
      4. Confirmation
    </a>
  </div>
</div>
// Steps with icon
.steps
  .steps-body
    a(href="#").step.step-completed
      span.step-indicator
        i(data-feather="check")
      span.step-icon
        i(data-feather="shopping-cart")
      | 1. Shopping cart
    a(href="#").step.step-active
      span.step-icon
        i(data-feather="user")
      | 2. Your details
    a(href="#").step
      span.step-icon
        i(data-feather="credit-card")
      | 3. Payment
    a(href="#").step
      span.step-icon
        i(data-feather="check-circle")
      | 4. Confirmation

Steps with progress

<!-- Steps with progress -->
<div class="steps">
  <div class="steps-header">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="steps-body">
    <a class="step has-indicator step-completed">
      <span class="step-indicator">
        <i data-feather="check"></i>
      </span>
      Address
    </a>
    <a class="step has-indicator step-active">
      <span class="step-indicator">2</span>
      Shipping
    </a>
    <a class="step has-indicator">
      <span class="step-indicator">3</span>
      Payment
    </a>
    <a class="step has-indicator">
      <span class="step-indicator">4</span>
      Review
    </a>
  </div>
</div>
// Steps with progress
.steps
  .steps-header
    .progress
      .progress-bar(role="progressbar", style="width: 50%", aria-valuenow="50", aria-valuemin="0", aria-valuemax="100")
  .steps-body
    a(href="#").step.has-indicator.step-completed
      span.step-indicator
        i(data-feather="check")
      | Address
    a(href="#").step.has-indicator.step-active
      span.step-indicator 2
      | Shipping
    a(href="#").step.has-indicator
      span.step-indicator 3
      | Paymenticonp.has-indicator
      span.step-indicator 4
      | Review