City of Tampa Style Guide

Steps 3.7

Toggle example guides Toggle HTML markup

Use to style a set of steps or linear ordered process.

When to use: If you need to outline a fixed stepped process.

When not to:

Notes:

<insert-markup>content.steps-</insert-markup>
  1. Print out application
  2. Gather support documents and scan them into system.
  3. Be sure to follow these guides
    • Step one
    • Step Two
    • Step Three
  4. Submit the application
<ol class="list list--ordered">
    <li class="list__item">Print out application</li>
    <li class="list__item">Gather support documents and scan them into system.</li>
    <li class="list__item">Be sure to follow these guides<ul><li>Step one</li> <li>Step Two</li><li>Step Three</li></ul></li>
    <li class="list__item">Submit the application</li>
</ol>
Source: src/scss/base/_components.scss, line 359