Step Wizard

Step Wizard, with arrows, made with terse HTML and CSS only. Check it out.

Adding a step

To add a new step, write this markup.

<a href=''>
  <span>
    Step number<br>
    Step content
  </span>
<a>

States

To show the current step, add the "current" class on the link.

<a href='' class=current>

To mark the step who is done, add the "done" class on the link.

<a href='' class=done>

Size and Colors

To change the size of the wizard globaly, edit $main-size in style.scss.

$main-size: new-size;

To change the colors theme, edit $main-color in style.scss.

$main-color: new-color;

👋🏼Say Hi!