Silicon Silicon UI Kit
 Buy now

Steps

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

Silicon component

Horizontal layout

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

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

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

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">2</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Learn by doing</h5>
      <p class="fs-sm mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">3</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Get instant expert feedback</h5>
      <p class="fs-sm mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.</p>
    </div>
  </div>
</div>

Aligment

1
Choose your course

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

1
Choose your course

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

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

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

Completed step

Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

<!-- Completed step example -->
<div class="steps steps-horizontal-md">
  <div class="step">
    <div class="step-number bg-light">
      <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle bg-faded-success"></span>
      <div class="step-number-inner bg-success">
        <i class="bx bx-check fs-1 text-white"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Choose your course</h5>
      <p class="fs-sm mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.</p>
    </div>
  </div>
  ...
</div>

Vertical layout

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

<!-- Vertical steps -->
<div class="steps">

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

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">2</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Learn by doing</h5>
      <p class="fs-sm mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">3</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Get instant expert feedback</h5>
      <p class="fs-sm mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.</p>
    </div>
  </div>
</div>

Small size

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

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

<!-- Small 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-sm steps-horizontal-md">

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

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">2</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Learn by doing</h5>
      <p class="fs-sm mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number">
      <div class="step-number-inner">3</div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Get instant expert feedback</h5>
      <p class="fs-sm mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.</p>
    </div>
  </div>
</div>

Icons instead of numbers

Research & Analysis

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

Prototyping

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

Pixel-perfect UI Design

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

<!-- Horizontal steps with icons instead of numbers -->
<!-- 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">

  <!-- Step -->
  <div class="step">
    <div class="step-number text-primary">
      <div class="step-number-inner">
        <i class="bx bx-search-alt fs-1"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Research &amp; Analysis</h5>
      <p class="fs-sm mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number text-primary">
      <div class="step-number-inner">
        <i class="bx bx-layout fs-1"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Prototyping</h5>
      <p class="fs-sm mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.</p>
    </div>
  </div>

  <!-- Step -->
  <div class="step">
    <div class="step-number text-primary">
      <div class="step-number-inner">
        <i class="bx bx-devices fs-1"></i>
      </div>
    </div>
    <div class="step-body">
      <h5 class="mb-2">Pixel-perfect UI Design</h5>
      <p class="fs-sm mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.</p>
    </div>
  </div>
</div>
Top