Awesomeness

Wizard

Horizontal Wizard

This horizontal wizard is the perfect responsive component for shop checkout or other multi-step processes.

Example

  • First Step
  • Second Step
  • Third Step
  • Fourth Step
  • Final Step

Imports

  • SASS:
    @import "base";
@import "imports/modules/wizard-h";

Code

<div class="l-wizard-h">
	<ul class="wizard-h">
		<li class="l-wizard-h-step wizard-h__step--previous">
			<i class="fa fa-check"></i>
			<span>First Step</span>
		</li>
		<li class="l-wizard-h-step wizard-h__step--current">
			<i class="fa fa-user"></i>
			<span>Second Step</span>
		</li>
		<li class="l-wizard-h-step wizard-h__step">
			<i class="fa fa-file-text-o"></i>
			<span>Third Step</span>
		</li>
		<li class="l-wizard-h-step wizard-h__step">
			<i class="fa fa-truck"></i>
			<span>Fourth Step</span>
		</li>
		<li class="l-wizard-h-step wizard-h__step">
			<i class="fa fa-thumbs-up"></i>
			<span>Final Step</span>
		</li>
	</ul>
</div>

Vertical Wizard

The vertical wizard should not be used for shop checkout processes but instead as a mini shopping cart or product configuration sub-steps during a checkout process. It usually appears in a sidebar.

Example

  • First Step

    Step 1 contains of some other steps that can be defined here.

  • Second Step

    Feel free to add some more HTML stuff into this div.

  • Third Step

    The end is near. Go further to see what happens

  • Final Step

Imports

  • SASS:
    @import "base";
@import "imports/modules/box";
@import "imports/modules/wizard-v";

Code

<div class="l-wizard-v">
	<ul class="wizard-v">
		<li class="wizard-v__step">
			<h3>First Step</h3>
			<p>Step 1 contains of some other steps that can be defined here.</p>
		</li>
		<li class="wizard-v__step">
			<h3>Second Step </h3>
			<p>Feel free to add some more HTML stuff into this div.</p>
		</li>
		<li class="wizard-v__step">
			<h3>Third Step</h3>
			<p>The end is near. Go further to see what happens</p>
		</li>
		<li class="wizard-v__step">
			<h3>Final Step</h3>
		</li>
	</ul>
</div>