Custom Stepper Components

Horizontal Stepper

  • Step 1 Card Details

    Completed

  • Step 2 Form Review

    In Progress

  • Step 3 Authentication

    Pending

  • Step 4 Create Code

    Pending

First
Second
Third
<div class="stepper stepper-custom tabs tabs--horizontal" id="horizontal1-form"> <div class="tabs__heading"> <ul class="tabs__nav"> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block active"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 1</span> <strong>Card Details</strong> <p class="step-status text-success">Completed</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 2</span> <strong>Form Review</strong> <p class="step-status text-darkblue">In Progress</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 3</span> <strong>Authentication</strong> <p class="step-status text-dark">Pending</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 4</span> <strong>Create Code</strong> <p class="step-status text-dark">Pending</p> </div> </li> </ul> <div class="progress progress-sm"> <div class="progress-bar bg-success"></div> </div> </div> <div class="tabs__body mt-4"> <div class="stepper-content"> <div class="">First</div> <div class="">Second</div> <div class="">Third</div> </div> <div class="stepper-navigation"> <button class="btn btn-pumpkin btn-prev" data-prev="preferences">Previous</button> <button class="btn btn-pumpkin btn-submit" id="submit-form">Next</button> </div> </div> </div>

Vertical Stepper

  • Step 1 Card Details

    Completed

  • Step 2 Form Review

    In Progress

  • Step 3 Authentication

    Pending

  • Step 4 Create Code

    Pending

First
Second
Third
<div class="stepper stepper-custom tabs tabs--vertical" id="vertical1-form"> <div class="tabs__heading"> <ul class="tabs__nav"> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block active"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 1</span> <strong>Card Details</strong> <p class="step-status text-success">Completed</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 2</span> <strong>Form Review</strong> <p class="step-status text-darkblue">In Progress</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 3</span> <strong>Authentication</strong> <p class="step-status text-dark">Pending</p> </div> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="check-icon"> <i data-lucide="check"></i> </span> </button> <div class="info"> <span class="step-title">Step 4</span> <strong>Create Code</strong> <p class="step-status text-dark">Pending</p> </div> </li> </ul> <div class="progress progress-sm "> <div class="progress-bar bg-success progress-vertical"></div> </div> </div> <div class="tabs__body mt-4"> <div class="stepper-content"> <div class="">First</div> <div class="">Second</div> <div class="">Third</div> </div> <div class="stepper-navigation"> <button class="btn btn-pumpkin btn-prev" data-prev="preferences">Previous</button> <button class="btn btn-pumpkin btn-submit" id="submit-form">Next</button> </div> </div> </div>

Horizontal Stepper

First
Second
Third
<div class="stepper tabs tabs--horizontal" id="horizontal-form"> <div class="tabs__heading"> <ul class="tabs__nav"> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block active"> <span class="step-number">1</span> Step One </button> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="step-number">2</span> Step Two </button> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="step-number">3</span> Step Three </button> </li> </ul> <div class="progress progress-sm"> <div class="progress-bar bg-pumpkin"></div> </div> </div> <div class="tabs__body"> <div class="stepper-content"> <div class="">First</div> <div class="">Second</div> <div class="">Third</div> </div> <div class="stepper-navigation"> <button class="btn btn-pumpkin btn-prev" data-prev="preferences">Previous</button> <button class="btn btn-pumpkin btn-submit" id="submit-form">Next</button> </div> </div> </div>

Vertical Stepper

First
Second
Third
<div class="stepper tabs tabs--vertical" id="vertical-form"> <div class="tabs__heading"> <ul class="tabs__nav"> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block active"> <span class="step-number">1</span> Step One </button> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="step-number">2</span> Step Two </button> </li> <li class="tabs__nav-item"> <button class="tabs__nav-button btn btn-pumpkin btn--block"> <span class="step-number">3</span> Step Three </button> </li> </ul> <div class="progress progress-sm"> <div class="progress-bar bg-pumpkin"></div> </div> </div> <div class="tabs__body"> <div class="stepper-content"> <div class="">First</div> <div class="">Second</div> <div class="">Third</div> </div> <div class="stepper-navigation"> <button class="btn btn-pumpkin btn-prev" data-prev="preferences">Previous</button> <button class="btn btn-pumpkin btn-submit" id="submit-form">Next</button> </div> </div> </div>