Examples for the UI of wizard allow you to display content in horizontal steps.
Check the basic example of vertical wizard. Using the wrapper class of .hk-wizard .hk-wizard-horizontal
.
<div class="hk-wizard hk-wizard-horizontal hk-wizard-label-horizontal">
<div class="hk-wizard-item hk-wizard-item-finish">
<div class="hk-wizard-item-container" role=button>
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-check-lg"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Finished</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-process hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon">2</span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">
In Progress
<div title="Left 00:00:08" class="hk-wizard-item-subtitle">Left 00:00:08</div>
</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-wait">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon">3</span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Waiting</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
Add class .hk-wizard-sm
with .hk-wizard
for sm wizard.
<div class="hk-wizard hk-wizard-horizontal hk-wizard-sm hk-wizard-label-horizontal">
<div class="hk-wizard-item hk-wizard-item-finish">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-check-lg"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Finished</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-process hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon">2</span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">
In Progress
<div title="Left 00:00:08" class="hk-wizard-item-subtitle">Left 00:00:08</div>
</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-wait">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon">3</span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Waiting</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
Check the icon style wizard..
<div class="hk-wizard hk-wizard-horizontal hk-wizard-label-horizontal">
<div class="hk-wizard-item hk-wizard-item-finish hk-wizard-item-custom hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-person"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Login</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-finish hk-wizard-item-custom">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-file-check"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Verification</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-process hk-wizard-item-custom">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-credit-card"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Pay</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-wait hk-wizard-item-custom">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-emoji-smile"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Done</div>
</div>
</div>
</div>
</div>
Use .hk-wizard-item-error
class with .hk-wizard-item
for error handling.
<div class="hk-wizard hk-wizard-horizontal hk-wizard-label-horizontal">
<div class="hk-wizard-item hk-wizard-item-finish hk-wizard-item-custom hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-person"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Login</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-error hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-x-lg"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">In Process</div>
<div class="hk-wizard-item-description">This is a description</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-wait hk-wizard-item-custom">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon">
<span class="hk-wizard-icon">
<i class="bi bi-emoji-smile"></i>
</span>
</div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Done</div>
</div>
</div>
</div>
</div>
Check the dot style wizard example.
<div class="hk-wizard hk-wizard-horizontal hk-wizard-label-vertical hk-wizard-dot">
<div class="hk-wizard-item hk-wizard-item-finish">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon"><span class="hk-wizard-icon-dot"></span></span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Finished</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-process hk-wizard-item-active">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon"><span class="hk-wizard-icon-dot"></span></span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">In Progress</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="hk-wizard-item hk-wizard-item-wait">
<div class="hk-wizard-item-container">
<div class="hk-wizard-item-tail"></div>
<div class="hk-wizard-item-icon"><span class="hk-wizard-icon"><span class="hk-wizard-icon-dot"></span></span></div>
<div class="hk-wizard-item-content">
<div class="hk-wizard-item-title">Waiting</div>
<div class="hk-wizard-item-description">This is a description.</div>
</div>
</div>
</div>
</div>