Steps

<!-- Steps dark skin  -->
<div class="steps steps-dark">

  <!-- Step: active -->
  <a href="#" class="step-item active">
    <div class="step-progress">
      <span class="step-count">1</span>
    </div>
    <div class="step-label">
      <i class="ci-cart"></i>
      Cart
    </div>
  </a>

  <!-- Step: active, current -->
  <a href="#" class="step-item active current">
    <div class="step-progress">
      <span class="step-count">2</span>
    </div>
    <div class="step-label">
      <i class="ci-user-circle"></i>
      Your details
    </div>
  </a>

  <!-- Step -->
  <a href="#" class="step-item">
    <div class="step-progress">
      <span class="step-count">3</span>
    </div>
    <div class="step-label">
      <i class="ci-package"></i>
      Shipping
    </div>
  </a>

  <!-- Step -->
  <a href="#" class="step-item">
    <div class="step-progress">
      <span class="step-count">4</span>
    </div>
    <div class="step-label">
      <i class="ci-card"></i>
      Payment
    </div>
  </a>
</div>

// Steps dark skin
.steps.steps-dark
  a(href="#").step-item.active
    .step-progress
      span.step-count 1
    .step-label
      i.ci-cart
      | Cart
  
  // Step
  a(href="#").step-item.active.current
    .step-progress
      span.step-count 2
    .step-label
      i.ci-user-circle
      | Your details

  // Step
  a(href="#").step-item
    .step-progress
      span.step-count 3
    .step-label
      i.ci-package
      | Shipping

  // Step
  a(href="#").step-item
    .step-progress
      span.step-count 4
    .step-label
      i.ci-card
      | Payment

<!-- Steps light skin  -->
<div class="steps steps-light">

  <!-- Step: active -->
  <a href="#" class="step-item active">
    <div class="step-progress">
      <span class="step-count">1</span>
    </div>
    <div class="step-label">
      <i class="ci-cart"></i>
      Cart
    </div>
  </a>

  <!-- Step: active, current -->
  <a href="#" class="step-item active current">
    <div class="step-progress">
      <span class="step-count">2</span>
    </div>
    <div class="step-label">
      <i class="ci-user-circle"></i>
      Your details
    </div>
  </a>

  <!-- Step -->
  <a href="#" class="step-item">
    <div class="step-progress">
      <span class="step-count">3</span>
    </div>
    <div class="step-label">
      <i class="ci-package"></i>
      Shipping
    </div>
  </a>

  <!-- Step -->
  <a href="#" class="step-item">
    <div class="step-progress">
      <span class="step-count">4</span>
    </div>
    <div class="step-label">
      <i class="ci-card"></i>
      Payment
    </div>
  </a>
</div>

// Steps light skin
.steps.steps-light
  a(href="#").step-item.active
    .step-progress
      span.step-count 1
    .step-label
      i.ci-cart
      | Cart
  
  // Step
  a(href="#").step-item.active.current
    .step-progress
      span.step-count 2
    .step-label
      i.ci-user-circle
      | Your details

  // Step
  a(href="#").step-item
    .step-progress
      span.step-count 3
    .step-label
      i.ci-package
      | Shipping

  // Step
  a(href="#").step-item
    .step-progress
      span.step-count 4
    .step-label
      i.ci-card
      | Payment

<!-- Steps based on media tabs -->
<ul class="nav nav-tabs media-tabs nav-justified">
  <li class="nav-item">
    <div class="nav-link completed">
      <div class="d-flex align-items-center">
        <div class="media-tab-media"><i class="ci-bag"></i></div>
        <div class="ps-3">
          <div class="media-tab-subtitle text-muted fs-xs mb-1">First step</div>
          <h6 class="media-tab-title text-nowrap mb-0">Order placed</h6>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div class="nav-link active">
      <div class="d-flex align-items-center">
        <div class="media-tab-media"><i class="ci-settings"></i></div>
        <div class="ps-3">
          <div class="media-tab-subtitle text-muted fs-xs mb-1">Second step</div>
          <h6 class="media-tab-title text-nowrap mb-0">Processing order</h6>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div class="nav-link">
      <div class="d-flex align-items-center">
        <div class="media-tab-media"><i class="ci-star"></i></div>
        <div class="ps-3">
          <div class="media-tab-subtitle text-muted fs-xs mb-1">Third step</div>
          <h6 class="media-tab-title text-nowrap mb-0">Quality check</h6>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div class="nav-link">
      <div class="d-flex align-items-center">
        <div class="media-tab-media"><i class="ci-package"></i></div>
        <div class="ps-3">
          <div class="media-tab-subtitle text-muted fs-xs mb-1">Fourth step</div>
          <h6 class="media-tab-title text-nowrap mb-0">Product dispatched</h6>
        </div>
      </div>
    </div>
  </li>
</ul>

// Steps based on media tabs
ul.nav.nav-tabs.media-tabs.nav-justified
  li.nav-item
    .nav-link.completed
      .d-flex.align-items-center
        .media-tab-media
          i.ci-bag
        .ps-3
          .media-tab-subtitle.text-muted.fs-xs.mb-1 First step
          h6.media-tab-title.text-nowrap.mb-0 Order placed
  li.nav-item
    .nav-link.active
      .d-flex.align-items-center
        .media-tab-media
          i.ci-settings
        .ps-3
          .media-tab-subtitle.text-muted.fs-xs.mb-1 Second step
          h6.media-tab-title.text-nowrap.mb-0 Processing order
  li.nav-item
    .nav-link
      .d-flex.align-items-center
        .media-tab-media
          i.ci-star
        .ps-3
          .media-tab-subtitle.text-muted.fs-xs.mb-1 Third step
          h6.media-tab-title.text-nowrap.mb-0 Quality check
  li.nav-item
    .nav-link
      .d-flex.align-items-center
        .media-tab-media
          i.ci-package
        .ps-3
          .media-tab-subtitle.text-muted.fs-xs.mb-1 Fourth step
          h6.media-tab-title.text-nowrap.mb-0 Product dispatched