Examples for the UI of wizard allow you to display content in vertical steps.
Check the basic example of vertical wizard. Using the wrapper class of .hk-wizard .hk-wizard-vertical
.
<div class="hk-wizard hk-wizard-vertical">
<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 role="img" aria-label="check" class="anticon anticon-check hk-wizard-finish-icon">
<svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
</svg>
</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">2</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">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-vertical hk-wizard-sm">
<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 role="img" aria-label="check" class="anticon anticon-check hk-wizard-finish-icon">
<svg viewBox="64 64 896 896" focusable="false" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
</svg>
</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">2</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">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 dot style wizard. Use class .hk-wizard-dot
.
<div class="hk-wizard hk-wizard-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. 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">Finished</div>
<div class="hk-wizard-item-description">This is a 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">In Progress</div>
<div class="hk-wizard-item-description">This is a 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 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>