Steppers

Horizontal

Basket

Payment

Thanks

  <div class="stepper--horizontal">
    <div class="stepper__step is-completed">
      <div class="stepper__step__indicator"><i class="material-icons">check</i></div>
      <div class="stepper__step__heading">Basket</div>
    </div>
    <div class="stepper__seperator"></div>
    <div class="stepper__step is-current">
      <div class="stepper__step__indicator">2</div>
      <div class="stepper__step__heading">Payment</div>
    </div>
    <div class="stepper__seperator"></div>
    <div class="stepper__step">
      <div class="stepper__step__indicator">3</div>
      <div class="stepper__step__heading">Thanks</div>
    </div>
  </div>

Vertical Basic

  <div class="stepper--vertical">
    <div class="stepper__step is-completed">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator"><i class="material-icons">check</i></div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content"></div>
    </div>
    <div class="stepper__step is-current">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator">2</div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content"></div>
    </div>
    <div class="stepper__step">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator">3</div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content"></div>
    </div>
  </div>

Vertical with Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Button

  <div class="stepper--vertical">
    <div class="stepper__step">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator">1</div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <img src="http://placehold.it/800x300" alt="Example Image"/>
        <a href="" class="button">Button</a>
        <a href="" class="button button--link">Button</a>
      </div>
    </div>
    <div class="stepper__step">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator">2</div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <img src="http://placehold.it/800x300" alt="Example Image"/>
      </div>
    </div>
    <div class="stepper__step">
      <header class="stepper__step__header">
        <div class="stepper__step__indicator">3</div>
        <div class="stepper__step__heading">Step Heading</div>
      </header>
      <div class="stepper__step__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <img src="http://placehold.it/800x300" alt="Example Image"/>
      </div>
    </div>
  </div>