Vertical Wizard

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

Default wizard

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

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

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

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

Check the dot style wizard. Use class .hk-wizard-dot.

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