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>// 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
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>// 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
Based on media tabs
<!-- 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