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

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

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

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

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="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>

                        <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="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-primary">5</span>
                            <div class="step-content">
                              <h4>Fifth 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 -->
                    
                  

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

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

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

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

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

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

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

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