Steps

Steps

Set steps for process using .steps &.stepclass.

  • Register
  • Choose plan
  • Purchase
  • Received 
<div class="flex flex-wrap items-center w-full gap-2">
   <ul class="w-full steps">
       <li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
       <li class="step step-primary !min-w-[7rem]"> Choose plan </li>
       <li class="step !min-w-[7rem]"> Purchase </li>
       <li class="step !min-w-[7rem]"> Received </li>
   </ul>
</div>

Responsive Steps

Set responsive steps for process using .responsive-vertical class.

  • Register
  • Order Placed
  • Review
  • Approval 
 <div class="flex flex-wrap items-center w-full gap-2">
   <ul class="w-full steps 2md:responsive-vertical">
       <li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
       <li class="step step-primary !min-w-[7rem]"> Order Placed </li>
       <li class="step !min-w-[7rem]"> Review </li>
       <li class="step !min-w-[7rem]"> Approval </li>
  </ul> 
</div>

Colored Steps

Add colored steps for process using .step-secondary .step-*(primary, info.., etc) class.

  • Name
  • Email
  • Upload Photo
  • Final 
 <div class="flex flex-wrap items-center w-full gap-2">
   <ul class="w-full steps">
       <li class="step step-secondary !min-w-[7rem] first:before:hidden"> Name </li>
       <li class="step step-secondary !min-w-[7rem]"> Email </li>
       <li class="step !min-w-[7rem]"> Upload Photo </li>
       <li class="step !min-w-[7rem]"> Final </li>
  </ul> 
</div>

Multi Colored

Set colored steps for process using .step-*(primary, info.., etc) class.

  • start
  • end
<div class="flex flex-wrap items-center w-full gap-2">
    <ul class="overflow-x-auto steps custom-scroll">
        <li class="step">Start</li>
        <li class="step step-info"></li>
        <li class="step step-info"></li>
        <li class="step step-info"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step step-success"></li>
        <li class="step step-success"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step step-warning"></li>
        <li class="step step-warning"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step step-primary"></li>
        <li class="step step-primary"></li>
        <li class="step"></li>
        <li class="step"></li>
        <li class="step step-danger"></li>
        <li class="step step-danger"></li>
        <li class="step step-danger"></li>
        <li class="step step-danger">End</li> 
    </ul> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode