AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Steps

Component is designed to showcase numbered steps of the process or timeline.

Around component

Horizontal layout

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Horizontal steps -->
<!-- Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl -->
<div class="steps steps-horizontal-md">

  <!-- Active step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">01</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Choose your course</h5>
      <p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">02</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Learn by doing</h5>
      <p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">03</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Get instant feedback</h5>
      <p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
    </div>
  </div>
</div>
// Horizontal steps
// Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl
.steps.steps-horizontal-md

  // Active step
  .step.active
    .step-number
      .step-number-inner 01
    .step-body
      h5.pb-1.mb-2 Choose your course
      p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
  
  // Step
  .step
    .step-number
      .step-number-inner 02
    .step-body
      h5.pb-1.mb-2 Learn by doing
      p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
  
  // Step
  .step
    .step-number
      .step-number-inner 03
    .step-body
      h5.pb-1.mb-2 Get instant feedback
      p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

Animate on hover

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Animate steps on hover -->
<!-- Create hoverable steps by adding "steps-hoverable" class -->
<div class="steps steps-horizontal-md steps-hoverable">

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">01</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Choose your course</h5>
      <p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">02</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Learn by doing</h5>
      <p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">03</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Get instant feedback</h5>
      <p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
    </div>
  </div>
</div>
// Horizontal steps
// Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl
.steps.steps-horizontal-md.steps-hoverable

  // Step
  .step
    .step-number
      .step-number-inner 01
    .step-body
      h5.pb-1.mb-2 Choose your course
      p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
  
  // Step
  .step
    .step-number
      .step-number-inner 02
    .step-body
      h5.pb-1.mb-2 Learn by doing
      p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
  
  // Step
  .step
    .step-number
      .step-number-inner 03
    .step-body
      h5.pb-1.mb-2 Get instant feedback
      p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

Alignment

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Center aligned steps -->
<div class="steps steps-horizontal-md steps-center">
  ...
</div>

<!-- Right aligned steps -->
<div class="steps steps-horizontal-md steps-end">
  ...
</div>
// Center aligned steps
.steps.steps-horizontal-md.steps-center
  // ...

// Right aligned steps
.steps.steps-horizontal-md.steps-end
  // ...

Vertical layout

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Vertical steps (default) -->
<div class="steps">

  <!-- Active step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">01</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Choose your course</h5>
      <p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">02</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Learn by doing</h5>
      <p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">03</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Get instant feedback</h5>
      <p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
    </div>
  </div>
</div>
// Vertical steps (default)
.steps

  // Active step
  .step.active
    .step-number
      .step-number-inner 01
    .step-body
      h5.pb-1.mb-2 Choose your course
      p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
  
  // Step
  .step
    .step-number
      .step-number-inner 02
    .step-body
      h5.pb-1.mb-2 Learn by doing
      p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
  
  // Step
  .step
    .step-number
      .step-number-inner 03
    .step-body
      h5.pb-1.mb-2 Get instant feedback
      p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

No connector

01
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

02
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

03
Get instant feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Steps without connector -->
<!-- Remove the connector between steps by adding "steps-no-connector" class -->
<div class="steps steps-no-connector">

  <!-- Active step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner">01</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Choose your course</h5>
      <p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">02</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Learn by doing</h5>
      <p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">03</div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Get instant feedback</h5>
      <p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
    </div>
  </div>
</div>
// Steps without connector
// Remove the connector between steps by adding "steps-no-connector" class
.steps.steps-no-connector

  // Active step
  .step.active
    .step-number
      .step-number-inner 01
    .step-body
      h5.pb-1.mb-2 Choose your course
      p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
  
  // Step
  .step
    .step-number
      .step-number-inner 02
    .step-body
      h5.pb-1.mb-2 Learn by doing
      p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
  
  // Step
  .step
    .step-number
      .step-number-inner 03
    .step-body
      h5.pb-1.mb-2 Get instant feedback
      p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

Card style

01

Formulation of the problem

Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.

02

Assessment of the current state

Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.

<!-- Card like steps -->
<!-- Card with border (default) example -->
<div class="position-relative d-flex justify-content-end my-3 py-1">
  <div class="btn btn-lg btn-icon btn-primary fs-xl fw-bold rounded-circle position-absolute top-50 start-0 translate-middle-y zindex-2 pe-none">01</div>
  <div class="card ps-3" style="width: calc(100% - 1.75rem);">
    <div class="card-body ps-4">
      <h3 class="h5 card-title pb-2 mb-1">Formulation of the problem</h3>
      <p class="card-text">Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.</p>
    </div>
  </div>
</div>

<!-- Card with gray background example -->
<div class="position-relative d-flex justify-content-end my-3 py-1">
  <div class="btn btn-lg btn-icon btn-primary fs-xl fw-bold rounded-circle position-absolute top-50 start-0 translate-middle-y zindex-2 pe-none">02</div>
  <div class="card border-0 bg-secondary ps-3" style="width: calc(100% - 1.75rem);">
    <div class="card-body ps-4">
      <h3 class="h5 card-title pb-2 mb-1">Assessment of the current state</h3>
      <p class="card-text">Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.</p>
    </div>
  </div>
</div>
// Card like steps
// Card with border (default) example
.position-relative.d-flex.justify-content-end.my-3.py-1
  .btn.btn-lg.btn-icon.btn-primary.fs-xl.fw-bold.rounded-circle.position-absolute.top-50.start-0.translate-middle-y.zindex-2
    | 01
  .card.ps-1(style="width: calc(100% - 1.75rem);")
    .card-body
      h3.h5.card-title.pb-2.mb-1 Formulation of the problem
      p.card-text Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.

// Card with gray background example
.position-relative.d-flex.justify-content-end.my-3.py-1
  .btn.btn-lg.btn-icon.btn-primary.fs-xl.fw-bold.rounded-circle.position-absolute.top-50.start-0.translate-middle-y.zindex-2
    | 02
  .card.border-0.bg-secondary.ps-1(style="width: calc(100% - 1.75rem);")
    .card-body
      h3.h5.card-title.pb-2.mb-1 Assessment of the current state
      p.card-text Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.

Icons instead of numbers

Research & Analysis

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.

Prototyping

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.

Pixel-perfect UI Design

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.

<!-- Steps with icons instead of numbers -->
<div class="steps">

  <!-- Active step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner fs-4">
        <i class="ai-search"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Research &amp; Analysis</h5>
      <p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner fs-4">
        <i class="ai-layout-side"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Prototyping</h5>
      <p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step active">
    <div class="step-number">
      <div class="step-number-inner fs-4">
        <i class="ai-monitor"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="pb-1 mb-2">Pixel-perfect UI Design</h5>
      <p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
    </div>
  </div>
</div>
// Steps with icons instead of numbers
.steps

  // Active step
  .step.active
    .step-number
      .step-number-inner.fs-4
        i.ai-search
    .step-body
      h5.pb-1.mb-2 Research & Analysis
      p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
  
  // Step
  .step
    .step-number
      .step-number-inner.fs-4
        i.ai-layout-side
    .step-body
      h5.pb-1.mb-2 Prototyping
      p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
  
  // Step
  .step
    .step-number
      .step-number-inner.fs-4
        i.ai-monitor
    .step-body
      h5.pb-1.mb-2 Pixel-perfect UI Design
      p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.