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>

Vertical: Navs

<!-- Vertical steps: nav -->
<div class="steps-vertical-start">

  <!-- Step -->
  <a class="step-vertical step-vertical-nav active" href="#">
    <div class="step-line"></div>
    <div class="step-body">
      <div class="step-label h3 mb-0">Present</div>
    </div>
  </a>

  <!-- Step -->
  <a class="step-vertical step-vertical-nav" href="#">
    <div class="step-line"></div>
    <div class="step-body">
      <div class="step-label h3 mb-0">March 2019</div>
    </div>
  </a>

  <!-- Step -->
  <a class="step-vertical step-vertical-nav" href="#">
    <div class="step-line"></div>
    <div class="step-body">
      <div class="step-label h3 mb-0">November 2018</div>
    </div>
  </a>
</div>
Top