Cartzilla Buy now

Steps

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

Cartzilla component

Dark skin

<!-- 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>

Light skin

<!-- 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>

Based on media tabs

  • First step
    Order placed
  • Second step
    Processing order
  • Third step
    Quality check
  • Fourth step
    Product dispatched
<!-- 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>
Top