Steps
Horizontal
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Color variations
Primary
Achieve virtually any design and layout from within the one template.
Secondary
We strive to figure out ways to help your business grow through all platforms.
Success
Find what you need in one template and combine features at will.
Danger
Find what you need in one template and combine features at will.
Warning
Find what you need in one template and combine features at will.
Info
Find what you need in one template and combine features at will.
Dark
Find what you need in one template and combine features at will.
Light
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary step-icon-pseudo"></span>
<div class="step-content">
<h4>Primary</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-secondary step-icon-pseudo"></span>
<div class="step-content">
<h4>Secondary</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-success step-icon-pseudo"></span>
<div class="step-content">
<h4>Success</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-danger step-icon-pseudo"></span>
<div class="step-content">
<h4>Danger</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-warning step-icon-pseudo"></span>
<div class="step-content">
<h4>Warning</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-info step-icon-pseudo"></span>
<div class="step-content">
<h4>Info</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-dark step-icon-pseudo"></span>
<div class="step-content">
<h4>Dark</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-light step-icon-pseudo"></span>
<div class="step-content">
<h4>Light</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Primary
Achieve virtually any design and layout from within the one template.
Secondary
We strive to figure out ways to help your business grow through all platforms.
Success
Find what you need in one template and combine features at will.
Danger
Find what you need in one template and combine features at will.
Warning
Find what you need in one template and combine features at will.
Info
Find what you need in one template and combine features at will.
Dark
Find what you need in one template and combine features at will.
Light
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-soft-primary step-icon-pseudo"></span>
<div class="step-content">
<h4>Primary</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-secondary step-icon-pseudo"></span>
<div class="step-content">
<h4>Secondary</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-success step-icon-pseudo"></span>
<div class="step-content">
<h4>Success</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-danger step-icon-pseudo"></span>
<div class="step-content">
<h4>Danger</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-warning step-icon-pseudo"></span>
<div class="step-content">
<h4>Warning</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-info step-icon-pseudo"></span>
<div class="step-content">
<h4>Info</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>
<div class="step-content">
<h4>Dark</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-light step-icon-pseudo"></span>
<div class="step-content">
<h4>Light</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Sizes
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-icon-lg">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-icon-sm">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-icon-xs">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Horizontally center aligned
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-centered">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Inline steps
- 1General info
- 2Billing address
- 4Confirmation
<!-- Step -->
<ul class="step step-xl step-inline">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<span class="step-title">General info</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<span class="step-title">Billing address</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<span class="step-title">Confirmation</span>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Item between
- 1General info
- 2Billing address
- 3Confirmation
<!-- Step -->
<ul class="step step-xl step-inline step-item-between">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<span class="step-title">General info</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<span class="step-title">Billing address</span>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<span class="step-title">Confirmation</span>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Last item borderless
Gunain .step-border-last-0 untuk menghilangkan border yang muncul di item terakhir.
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-border-last-0">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Dashed style
Gunain .step-dashed untuk menggunakan garis putus-putus.
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-dashed">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Icon style
Tambahin .step-icon-pseudo setelah class .step-icon untuk menggunakan gaya yang berbeda.
First step
Achieve virtually any design and layout from within the one template.
Second step
We strive to figure out ways to help your business grow through all platforms.
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-dashed">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary step-icon-pseudo"></span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary step-icon-pseudo"></span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary step-icon-pseudo"></span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Atau bisa menggunakan icons.
First step
Achieve virtually any design and layout from within the one template.
Second step
We strive to figure out ways to help your business grow through all platforms.
Third step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-md step-dashed">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">
<i class="bi-chevron-right"></i>
</span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">
<i class="bi-chevron-right"></i>
</span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">
<i class="bi-chevron-right"></i>
</span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Avatars
Avatar
Achieve virtually any design and layout from within the one template.
Avatar
We strive to figure out ways to help your business grow through all platforms.
Avatar
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
</div>
<div class="step-content">
<h4>Avatar</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img10.jpg" alt="">
</div>
<div class="step-content">
<h4>Avatar</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img3.jpg" alt="">
</div>
<div class="step-content">
<h4>Avatar</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->
Dividers
Gunakan .step-divider untuk memisahkan jarak dengan tanggal, nama atau teks apapun.
- Today
- B
Bob Dean
Marked project status as "In progress"
- Yesterday
David Harrison
Added 5 new card styles to Payments
- D
David Lidell
Added a new member to Front
Rachel King
Earned a "Top endorsed" badge
- Last week
- C
Costa Quinn
Marked project status as "In progress"
<!-- Step -->
<ul class="step">
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<small class="step-divider">Today</small>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
</div>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Iana Robinson</a>
</h5>
<p class="font-size-sm">Uploaded weekly reports to the task <a class="text-uppercase" href="#"><i class="bi-journal-bookmark-fill"></i></a></p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-dark">B</span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Bob Dean</a>
</h5>
<p class="font-size-sm">Marked project status as <span class="badge badge-soft-primary badge-pill"><span class="legend-indicator bg-primary"></span>"In progress"</span></p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<small class="step-divider">Yesterday</small>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img3.jpg" alt="">
</div>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">David Harrison</a>
</h5>
<p class="font-size-sm">Added 5 new card styles to <a href="#">Payments</a></p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-info">D</span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">David Lidell</a>
</h5>
<p class="font-size-sm">Added a new member to Front</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img7.jpg" alt="">
</div>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Rachel King</a>
</h5>
<p class="font-size-sm">Earned a "Top endorsed" <i class="bi-patch-check-fill text-primary"></i> badge</p>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<small class="step-divider">Last week</small>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<div class="step-avatar">
<img class="step-avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img6.jpg" alt="">
</div>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Mark Williams</a>
</h5>
<p class="font-size-sm">Attached two files.</p>
<ul class="list-group list-group-sm">
<!-- List Item -->
<li class="list-group-item list-group-item-light">
<div class="d-flex">
<div class="flex-shrink-0 me-2">
<i class="bi-paperclip"></i>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span class="d-block text-dark text-truncate">Requirements.figma</span>
<small class="d-block">8mb</small>
</div>
</div>
</li>
<!-- End List Item -->
<!-- List Item -->
<li class="list-group-item list-group-item-light">
<div class="d-flex">
<div class="flex-shrink-0 me-2">
<i class="bi-paperclip"></i>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span class="d-block text-dark text-truncate">Requirements.sketch</span>
<small class="d-block">4mb</small>
</div>
</div>
</li>
<!-- End List Item -->
</ul>
</div>
</div>
</li>
<!-- End Step Item -->
<!-- Step Item -->
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">C</span>
<div class="step-content">
<h5 class="mb-1">
<a class="text-dark" href="#">Costa Quinn</a>
</h5>
<p class="font-size-sm">Marked project status as <span class="badge badge-soft-primary badge-pill"><span class="legend-indicator bg-primary"></span>"In progress"</span></p>
</div>
</div>
</li>
<!-- End Step Item -->
</ul>
<!-- End Step -->
Timeline
- 1
First step
Achieve virtually any design and layout from within the one template.
- 2
Second step
We strive to figure out ways to help your business grow through all platforms.
- 3
Third step
Find what you need in one template and combine features at will.
- 4
Fourth step
Find what you need in one template and combine features at will.
- 5
Fifth step
Find what you need in one template and combine features at will.
<!-- Step -->
<ul class="step step-timeline-md">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">1</span>
<div class="step-content">
<h4>First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">2</span>
<div class="step-content">
<h4>Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">3</span>
<div class="step-content">
<h4>Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">4</span>
<div class="step-content">
<h4>Fourth step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon step-icon-soft-primary">5</span>
<div class="step-content">
<h4>Fifth step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
<!-- End Step -->