Steppers
Steppers are a great way to provide instructional information that must be followed in sequence. The stepper component provides a simple container to guide visitors through a process.
Example Usage:
1
Step Number One
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio eum rerum laudantium! Atque obcaecati amet totam ipsam alias necessitatibus corporis, molestias nemo repellat asperiores rerum voluptas eius, dolor sunt non, tempore possimus.
2
Step Number Two
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio eum rerum laudantium! Atque obcaecati amet totam ipsam alias necessitatibus corporis, molestias nemo repellat asperiores rerum voluptas eius, dolor sunt non, tempore possimus.
3
Step Number Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio eum rerum laudantium! Atque obcaecati amet totam ipsam alias necessitatibus corporis, molestias nemo repellat asperiores rerum voluptas eius, dolor sunt non, tempore possimus.
Code Example:
<div class="stepper">
<div class="step">
<p class="step-number">1</p>
<p class="step-title">Step Number One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>
</div>
<div class="step">
<p class="step-number">2</p>
<p class="step-title">Step Number Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>
</div>
<div class="step">
<p class="step-number">3</p>
<p class="step-title">Step Number Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>
</div>
</div>