Steps

Style ordered list and divs with steps number in circles

GCWeb implementation plan

• 2021-06 - Engage with TBS to show them this design pattern
• 2021-10 - Review and identify requirement to make this functionality enterprise ready
• 2021-11 - Produce accessibility and usability report on its usage on Canada.ca
• 2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
• 2023-12 - review updated CSS and governance added to validate usability toward stable

Todo and for future consideration

• Review governance and rationale for the use of both designs

Sponsor: CRA - Christopher Oakes (@christopher-o)

Classes used

• lst-stps
• ld-zr
• stps-strpd
• lst-stps-itm
• lst-stps-sub

If the first element of the list item is a header, the default margin-top is removed to align better with the list number.

When to use

Use this pattern when there is a need to better emphasize the sequential order of a list due to other design considerations, such as headers, or long paragraph of content.

There are two options, using an <ol> element, or a set of grouped block elements like <div> or <section>.

When not to use

Avoid this pattern if it violates any governance regarding ordered lists or ordered content.

Do not use if each list item only contains a small amount of content, use a normal ordered list instead.

Default steps list pattern

This pattern can be used to navigate to a group of pages, while informing that the pages should be read or completed in a sequential order.

1. Topic/task hyperlink text for step 1

   Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to

2. Topic/task hyperlink text for step 2

   Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to

3. Topic/task hyperlink text step 3

   Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to

4. Topic/task hyperlink text step 4

   Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to

<ol class="lst-stps">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Lead zero steps list pattern

This pattern can be used within a single web page to highlight a list of steps that contain a large amount of content per step.

<ol class="lst-stps ld-zr">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Sub list ordered items

This pattern currently appeard as a lower alpha item (e.g. 2a, 2b, 2c, etc.).

//Default
<ol class="lst-stps">
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>
//Lead zero
<ol class="lst-stps ld-zr">
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>

Striped design for steps

This pattern can be used when there needs to be a clearer distinction between steps.

You can also choose to stripe any sub list.

This design should be used sparingly to avoid the risk of certain list items looking "highlighted".

//Default striped design
<ol class="lst-stps stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>
//Default striped design with one sub list striped
<ol class="lst-stps stps-strpd">
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub stps-strpd">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>

//Lead zero striped design
<ol class="lst-stps ld-zr stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>
//Lead zero striped design with one sub list striped
<ol class="lst-stps ld-zr stps-strpd">
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub stps-strpd">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>

List steps using block elements