Buy now
Steps
Element to showcase numbered steps of the process or timeline. Comes in different styles.
Createx component
Horizontal
01
Research &Analysis
Culpa nostrud commodo ea consequat aliquip reprehenderit. Veniam velit nostrud aliquip sunt.
02
Prototyping
Anim reprehenderit sint voluptate exercitation adipisicing laborum adipisicing. Minim ad tempor est ea.
03
Pixel-perfect UI Design
Adipisicing esse aliqua aliquip qui amet. Aute eiusmod dolore dolore et ad et veniam ad deserunt.
<!-- Horizontal step wrapper -->
<div class="steps row">
<!-- Step -->
<div class="col-md-4">
<div class="step mb-md-0 mb-5">
<div class="step-head mb-3">
<span class="step-indicator">01</span>
<span class="step-line"></span>
</div>
<div class="step-body">
<h3 class="h5 mb-2">Research & Analysis</h3>
<p class="mb-3 text-muted">Culpa nostrud commodo ea consequat aliquip reprehenderit. Veniam velit nostrud aliquip sunt.</p>
</div>
</div>
</div>
<!-- Step -->
<div class="col-md-4">
<div class="step mb-md-0 mb-5">
<div class="step-head mb-3">
<span class="step-indicator">02</span>
<span class="step-line"></span>
</div>
<div class="step-body">
<h3 class="h5 mb-2">Prototyping</h3>
<p class="mb-3 text-muted">Anim reprehenderit sint voluptate exercitation adipisicing laborum adipisicing. Minim ad tempor est ea.</p>
</div>
</div>
</div>
<!-- Step -->
<div class="col-md-4">
<div class="step">
<div class="step-head mb-3">
<span class="step-indicator">03</span>
</div>
<div class="step-body">
<h3 class="h5 mb-2">Pixel-perfect UI Design</h3>
<p class="mb-3 text-muted">Adipisicing esse aliqua aliquip qui amet. Aute eiusmod dolore dolore et ad et veniam ad deserunt.</p>
</div>
</div>
</div>
</div>Vertical
Step 1
Off-Site SEO Analysis
Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.
Step 2
Technical SEO Optimizations
Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.
Step 3
Usability Check
Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies.
Step 4
Content Marketing
Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.
<!-- Vertical steps -->
<!-- Step -->
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 1</h4>
<h3 class="h5 mb-2">Off-Site SEO Analysis</h3>
<p class="mb-0 text-muted">Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.</p>
</div>
</div>
<!-- Step -->
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 2</h4>
<h3 class="h5 mb-2">Technical SEO Optimizations</h3>
<p class="mb-0 text-muted">Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.</p>
</div>
</div>
<!-- Step -->
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 3</h4>
<h3 class="h5 mb-2">Usability Check</h3>
<p class="mb-0 text-muted">Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies. </p>
</div>
</div>
<!-- Step -->
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 4</h4>
<h3 class="h5 mb-2">Content Marketing</h3>
<p class="mb-0 text-muted">Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.</p>
</div>
</div>Vertical: Alignment
Step 1
Off-Site SEO Analysis
Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.
Step 2
Technical SEO Optimizations
Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.
Step 3
Usability Check
Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies.
Step 4
Content Marketing
Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.
Step 1
Off-Site SEO Analysis
Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.
Step 2
Technical SEO Optimizations
Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.
Step 3
Usability Check
Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies.
Step 4
Content Marketing
Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.
<!-- Vertical steps: right alignment -->
<div class="steps-vertical-end">
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 1</h4>
<h3 class="h5 mb-2">Off-Site SEO Analysis</h3>
<p class="mb-0 text-muted">Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.</p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 2</h4>
<h3 class="h5 mb-2">Technical SEO Optimizations</h3>
<p class="mb-0 text-muted">Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.</p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 3</h4>
<h3 class="h5 mb-2">Usability Check</h3>
<p class="mb-0 text-muted">Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies. </p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 4</h4>
<h3 class="h5 mb-2">Content Marketing</h3>
<p class="mb-0 text-muted">Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.</p>
</div>
</div>
</div>
<!-- Vertical steps: left alignment -->
<div class="steps-vertical-start">
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 1</h4>
<h3 class="h5 mb-2">Off-Site SEO Analysis</h3>
<p class="mb-0 text-muted">Aliquam turpis viverra quam sit interdum blandit posuere pellentesque. Nisl, imperdiet gravida massa neque.</p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 2</h4>
<h3 class="h5 mb-2">Technical SEO Optimizations</h3>
<p class="mb-0 text-muted">Facilisis pellentesque quis accumsan ultricies. Eu egestas eget feugiat lacus, amet, sollicitudin egestas laoreet etiam. Nunc nisl orci auctor et fames.</p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 3</h4>
<h3 class="h5 mb-2">Usability Check</h3>
<p class="mb-0 text-muted">Eget amet, enim pharetra leo egestas nisi, odio imperdiet facilisis. Aliquet orci varius volutpat egestas facilisi lobortis. Varius praesent pretium in leo, accumsan, in ultricies. </p>
</div>
</div>
<div class="step-vertical">
<div class="step-line text-primary"></div>
<div class="step-body">
<h4 class="h6 mb-0 fs-xs fw-black text-muted text-uppercase">Step 4</h4>
<h3 class="h5 mb-2">Content Marketing</h3>
<p class="mb-0 text-muted">Non tempor pulvinar tincidunt aliquam. Placerat ultricies malesuada dui auctor. Faucibus in leo, nulla odio nulla imperdiet quis faucibus neque.</p>
</div>
</div>
</div>Vertical: Inside table
| Status | Location | Date | Time | |
|---|---|---|---|---|
| Order Placed | New York, USA | August 29, 2020 | 2:00 pm | |
| Documentation Prepared | New York, USA | August 29, 2020 | 3:30 pm | |
| Booking Arranged | New York, USA | August 29, 2020 | 3:35 pm | |
| Collected | New York, USA | August 29, 2020 | 4:00 pm | |
| In Transit to Destination | New York, USA | August 29, 2020 | 6:00 pm | |
| Arrived at Destination | London, United Kingdom | |||
| Out for Delivery | London, United Kingdom | |||
| Delivered | London, United Kingdom |
<!-- Vertical steps inside table -->
<div class="table-responsive">
<table class="table">
<thead class="fs-lg">
<tr>
<th class="border-0"></th>
<th class="border-0">Status</th>
<th class="border-0">Location</th>
<th class="border-0">Date</th>
<th class="border-0">Time</th>
</tr>
</thead>
<tbody>
<!-- Active step -->
<tr class="step-vertical active">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Order Placed</td>
<td class="py-3">New York, USA</td>
<td class="py-3">August 29, 2020</td>
<td class="py-3">2:00 pm</td>
</tr>
<!-- Active step -->
<tr class="step-vertical active">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Documentation Prepared</td>
<td class="py-3">New York, USA</td>
<td class="py-3">August 29, 2020</td>
<td class="py-3">3:30 pm</td>
</tr>
<!-- Active step -->
<tr class="step-vertical active">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Booking Arranged</td>
<td class="py-3">New York, USA</td>
<td class="py-3">August 29, 2020</td>
<td class="py-3">3:35 pm</td>
</tr>
<!-- Active step -->
<tr class="step-vertical active">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Collected</td>
<td class="py-3">New York, USA</td>
<td class="py-3">August 29, 2020</td>
<td class="py-3">4:00 pm</td>
</tr>
<!-- Active step -->
<tr class="step-vertical active">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">In Transit to Destination</td>
<td class="py-3">New York, USA</td>
<td class="py-3">August 29, 2020</td>
<td class="py-3">6:00 pm</td>
</tr>
<!-- Step -->
<tr class="step-vertical">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Arrived at Destination</td>
<td class="py-3">London, United Kingdom</td>
<td class="py-3"></td>
<td class="py-3"></td>
</tr>
<!-- Step -->
<tr class="step-vertical">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Out for Delivery</td>
<td class="py-3">London, United Kingdom</td>
<td class="py-3"></td>
<td class="py-3"></td>
</tr>
<!-- Step -->
<tr class="step-vertical">
<th class="pe-3 position-relative border-0" scope="row">
<div class="step-line"></div>
</th>
<td class="py-3">Delivered</td>
<td class="py-3">London, United Kingdom</td>
<td class="py-3"></td>
<td class="py-3"></td>
</tr>
</tbody>
</table>
</div>