Used to display a multi-step workflow on a page. Only one step is shown at once and users can navigate from step to step.
.multiStepPane for the container element.multiStepPane-item for the child elements.multiStepPane-goto for links/buttons that change the step. Use data-step to pick the step to goto..multiStepPane-next for a next link/button. This will
take users to the next step in DOM source order. However, if users go back
to this step, then click next again, then they will go to the last step
visited so far.
<div class="multiStepPane">
<div id="step1" class="multiStepPane-step active">
<p>Step One</p>
<button class="button cta multiStepPane-next">Next</button>
</div>
<div id="step2" class="multiStepPane-step">
<p>Step Two</p>
<button class="button cta multiStepPane-next">Next</button>
</div>
<div id="step3" class="multiStepPane-step">
<p>Step Three</p>
<ul class="bullets">
<li><a class="multiStepPane-goto" data-step="step1">Back to step 1</button></li>
<li><a class="multiStepPane-goto" data-step="step2">Back to step 2</button></li>
</ul>
</div>
</div>