Steps

Examples for the ss-c-steps module.

Default

  • Choose
  • Configure
  • Purchase
  • Ship
HTML 
<ul class="ss-c-steps">
            <li class="ss-c-step ss-c-step--primary">Choose</li>
            <li class="ss-c-step ss-c-step--primary">Configure</li>
            <li class="ss-c-step">Purchase</li>
            <li class="ss-c-step">Ship</li>
        </ul>

Vertical

  • Plan
  • Build
  • Test
  • Ship
HTML 
<ul class="ss-c-steps ss-c-steps--vertical">
            <li class="ss-c-step ss-c-step--success">Plan</li>
            <li class="ss-c-step ss-c-step--success">Build</li>
            <li class="ss-c-step ss-c-step--warning">Test</li>
            <li class="ss-c-step">Ship</li>
        </ul>