Step

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. By default .step is vertically 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>First step</h4>
        <p class="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Horizontally center aligned

The .step-centered class helps achieve a center alignment.

  • 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>First step</h4>
        <p class="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Inline steps

You can turn your horizontal step in to inline style and borders in the center with the help of the .step-inline class.

  • 1
    General info
  • 2
    Billing address
  • 3
    Payment
  • 4
    Confirmation 
<!-- 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-inline-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-inline-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-inline-title">Payment</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-inline-title">Confirmation</span>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Vertical example

  • 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="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

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">
  <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="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Color variations

All theme color available for 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.

  • Navy

    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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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-navy step-icon-pseudo"></span>
      <div class="step-content">
        <h4>Navy</h4>
        <p class="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Including soft color styles.

  • 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.

  • Navy

    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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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="text-body">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-navy step-icon-pseudo"></span>
      <div class="step-content">
        <h4>Navy</h4>
        <p class="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Avatars

Available in all .step-icon-lg, .step-icon-sm or .step-icon-xs sizes.

  • Image Description

    Avatar

    Achieve virtually any design and layout from within the one template.

  • Image Description

    Avatar

    We strive to figure out ways to help your business grow through all platforms.

  • Image Description

    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/100x100/img3.jpg" alt="Image Description">
      </div>
      <div class="step-content">
        <h4>Avatar</h4>
        <p class="text-body">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/100x100/img2.jpg" alt="Image Description">
      </div>
      <div class="step-content">
        <h4>Avatar</h4>
        <p class="text-body">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/100x100/img1.jpg" alt="Image Description">
      </div>
      <div class="step-content">
        <h4>Avatar</h4>
        <p class="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Last item borderless

If you need to remove border from the last element, use the .step-border-last-0 class.

  • 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="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Dashed style

Utilize the dashed style with the .step-dashed class.

  • 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="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Icon sizes

Fancy larger, smaller or extra small icon sizes? Add .step-icon-lg, .step-icon-sm or .step-icon-xs for additional 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-dashed">
  <li class="step-item">
    <div class="step-content-wrapper">
      <span class="step-icon step-icon-lg step-icon-primary">1</span>
      <div class="step-content">
        <h4>First step</h4>
        <p class="text-body">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-lg step-icon-primary">2</span>
      <div class="step-content">
        <h4>Second step</h4>
        <p class="text-body">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-lg step-icon-primary">3</span>
      <div class="step-content">
        <h4>Third step</h4>
        <p class="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy
  • 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-sm step-icon-primary">1</span>
      <div class="step-content">
        <h4>First step</h4>
        <p class="text-body">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-sm step-icon-primary">2</span>
      <div class="step-content">
        <h4>Second step</h4>
        <p class="text-body">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-sm step-icon-primary">3</span>
      <div class="step-content">
        <h4>Third step</h4>
        <p class="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy
  • 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-xs step-icon-primary">1</span>
      <div class="step-content">
        <h4>First step</h4>
        <p class="text-body">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-xs step-icon-primary">2</span>
      <div class="step-content">
        <h4>Second step</h4>
        <p class="text-body">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-xs step-icon-primary">3</span>
      <div class="step-content">
        <h4>Third step</h4>
        <p class="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

Icon styles

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="text-body">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="text-body">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="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy

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="fas fa-angle-right"></i>
      </span>
      <div class="step-content">
        <h4>First step</h4>
        <p class="text-body">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="fas fa-angle-right"></i>
      </span>
      <div class="step-content">
        <h4>Second step</h4>
        <p class="text-body">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="fas fa-angle-right"></i>
      </span>
      <div class="step-content">
        <h4>Third step</h4>
        <p class="text-body">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </li>
</ul>
<!-- End Step -->
Copy