Steps
A component that displays content as a process with defined by user milestones.
Horizontal example
You can utilize .step{-sm|-md|-lg|-xl} classes to change when they are horizontally aligned.
This example is horizontally aligned above -md resolution and vertically below. Resize the window to see it in action.
-
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 -->
By default .step is vertically 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">
<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
Add any of the below mentioned modifier classes to change the appearance of a 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-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 -->
Including soft colors.
-
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
Use .step-icon-lg for large size.
-
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 -->
Use .step-icon-sm for smaller size.
-
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 -->
Use .step-icon-xs for extra small size.
-
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
Use .step-centered to center align.
-
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
Turn your horizontal step in to inline style and borders in the center with .step-inline class.
-
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
Use .step-item-between to fill the whole between individual titles.
-
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
Use .step-border-last-0 to remove the border from the last item.
-
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
Use .step-dashed for a dashed style border.
-
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
Make icons look different by adding .step-icon-pseudo next to the .step-icon class.
-
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 -->
Or go with simple 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
Available in all .step-icon-lg, .step-icon-sm or .step-icon-xs sizes.
-
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="../assets/img/160x160/img9.jpg" alt="Image Description">
</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="../assets/img/160x160/img10.jpg" alt="Image Description">
</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="../assets/img/160x160/img3.jpg" alt="Image Description">
</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
Use .step-divider to divide steps with dates, names or any text.
-
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="../assets/img/160x160/img9.jpg" alt="Image Description">
</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="../assets/img/160x160/img3.jpg" alt="Image Description">
</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="../assets/img/160x160/img7.jpg" alt="Image Description">
</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="../assets/img/160x160/img6.jpg" alt="Image Description">
</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
Create a vertical oriented timeline with the .step-timeline{-sm|-md|-lg|-xl} classes.
-
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 -->