List steps - documentation
Purpose
To bring better prominence of content that is in an ordered list. To have a design that better reflects the size and weight of headers.
Usage
Use when
- The steps and content are a primary focus of the page
- Default design (circle with number inside):
- Used for navigation, such as a topic page, or a subway step page where the headers are links to sub topic or sub step pages
- Recommend to use action verbs
- Should always have headers
- Lead zero design (right border with steps 1 to 9 lead by a zero):
- Used for regular content, such as a step by step instructions
- Using headers is optional
Do not use when
- The content does not meet the criteria of being in an ordered list
- Refer to: Canada.ca style guide on numbered lists
- The list is not a primary part of the page
- The list items only contain a small amount of content, use a normal ordered list
Be careful when
Mismatching the wrong design with the wrong type of content.
Working examples
Evaluation and report
How to implimement
Default design for step-by-step navigation to web pages
On top level list item:
<ol class="lst-stps">Configuration options
Lead zero design for in page step-by-step content
On top level list item:
<ol class="lst-stps ld-zr">Sub (nested) lists
On sub lists:
...
<li>
<ol class="lst-stps-sub">
...
</ol>
</li>
...The sub list inherits the design of the parent list (default or lead zero).
They appear as a lower alpha item (e.g. 2a, 2b, 2c, etc.).
Striped list steps
This design should be used sparingly to avoid the risk of certain list items looking "highlighted".
Striped design (default):
<ol class="lst-stps stps-strpd">Striped design (lead zero):
<ol class="lst-stps ld-zr stps-strpd">Striped sub (nested) lists
Sub lists by default will not inherit the striped design without using the stps-strpd class on their own element.
Striped sub list design (default):
<ol class="lst-stps stps-strpd">
...
<li>
<ol class="lst-stps-sub stps-strpd">
...
</ol>
</li>
...
</ol>
Striped sub list design (lead zero):
<ol class="lst-stps ld-zr stps-strpd">
...
<li>
<ol class="lst-stps-sub stps-strpd">
...
</ol>
</li>
...
</ol>
Start attribute
Follow the <ol> attribute start value from 2 to 9.
<ol class="lst-stps" start="2">Source code
Page details
- Date modified: