Horizontal Wizard

Examples for the UI of wizard allow you to display content in horizontal steps.

Default Wizard

Check the basic example of vertical wizard. Using the wrapper class of .hk-wizard .hk-wizard-horizontal.

Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.
														
<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>
													
Wizard sm

Add class .hk-wizard-sm with .hk-wizard for sm wizard.

Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.
														
<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>
													
Icon wizard

Check the icon style wizard..

Login
Verification
Pay
Done
														
<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>
													
Error status

Use .hk-wizard-item-error class with .hk-wizard-item for error handling.

Login
In Process
This is a description
Done
														
<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>
													
Dot Style

Check the dot style wizard example.

Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
														
<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>