indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Stepper

Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.

Stepper horizontal #

        
        <ul class="stepper stepper-horizontal">
            <li class="stepper-step stepper-completed stepper-done">
                <div class="stepper-head">
                    <span class="stepper-head-icon stepper-head-icon-active"> 1 </span>
                    <span class="stepper-head-text"> step </span>
                </div>
            </li>
            <li class="stepper-step stepper-completed">
                <div class="stepper-head">
                    <span class="stepper-head-icon stepper-head-icon-active"> 2 </span>
                    <span class="stepper-head-text"> step </span>
                </div>
            </li>
            <li class="stepper-step stepper-completed">
                <div class="stepper-head">
                    <span class="stepper-head-icon"> 3 </span>
                    <span class="stepper-head-text"> step </span>
                </div>
            </li>
            <li class="stepper-step stepper-completed">
                <div class="stepper-head">
                    <span class="stepper-head-icon"> 4 </span>
                    <span class="stepper-head-text"> step </span>
                </div>
            </li>
        </ul>
RESULT
  • 1 step
  • 2 step
  • 3 step
  • 4 step

You can use stepper without number.

    
    <ul class="stepper stepper-horizontal">
    <li class="stepper-step stepper-completed stepper-done">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-head-icon-active"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-head-icon-active"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed">
        <div class="stepper-head">
            <span class="stepper-head-icon"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-warning"> <i class="fa fa-exclamation-triangle stepper-warning-icon"></i></span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
</ul>
RESULT
  • step
  • step
  • step
  • step

Stepper vertical #

You can use vertical stepper with number.

            
            <ul class="stepper stepper-vertical">
                <li class="stepper-step stepper-completed stepper-done">
                    <div class="stepper-head">
                        <span class="stepper-head-icon stepper-head-icon-active"> 1 </span>
                        <span class="stepper-head-text"> step </span>
                    </div>
                </li>
                <li class="stepper-step stepper-completed">
                    <div class="stepper-head">
                        <span class="stepper-head-icon stepper-head-icon-active"> 2 </span>
                        <span class="stepper-head-text"> step </span>
                    </div>
                </li>
                <li class="stepper-step stepper-completed">
                    <div class="stepper-head">
                        <span class="stepper-head-icon"> 3 </span>
                        <span class="stepper-head-text"> step </span>
                    </div>
                </li>
                <li class="stepper-step stepper-completed">
                    <div class="stepper-head">
                        <span class="stepper-head-icon"> 4 </span>
                        <span class="stepper-head-text"> step </span>
                    </div>
                </li>
            </ul>
RESULT
  • 1 step
  • 2 step
  • 3 step
  • 4 step

You can use vertical stepper without number.

<ul class="stepper stepper-vertical">
    <li class="stepper-step stepper-completed stepper-done">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-head-icon-active"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed stepper-done">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-head-icon-active"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-head-icon-active"> <span class="stepper-head-check"></span> </span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
    <li class="stepper-step stepper-completed">
        <div class="stepper-head">
            <span class="stepper-head-icon stepper-warning"> <i class="fa fa-exclamation-triangle stepper-warning-icon"></i></span>
            <span class="stepper-head-text"> step </span>
        </div>
    </li>
</ul>
RESULT
  • step
  • step
  • step
  • step