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.
Todo and for future consideration
- Remove the support for
<div>
Sponsor: CRA - Christopher Oakes (@christopher-o)
Classes used
lst-stpsstps-strpdlst-stps-itmlst-stps-sub
Steps as an single-level <ol>
Default design
- Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
- List item 2
-
List item 3
Second paragraph
- List item 4
View code
<ol class="lst-stps">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>With zebra striping
- Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
- List item 2
-
List item 3
Second paragraph
- List item 4
View code
<ol class="lst-stps stps-strpd">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>Steps as an <ol> with sub-steps (nested <ol>)
Default design
- Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
- List item 1 sub item 1
- List item 1 sub item 2
- List item 1 sub item 3
- List item 2
-
List item 3
Second paragraph
- List item 4
- List item 4 sub item 1
- List item 4 sub item 2
- List item 4 sub item 3
View code
<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>With zebra striping
- Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
- List item 1 sub item 1
- List item 1 sub item 2
- List item 1 sub item 3
- List item 2
-
List item 3
Second paragraph
- List item 4
- List item 4 sub item 1
- List item 4 sub item 2
- List item 4 sub item 3
View code
<ol class="lst-stps stps-strpd">
<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>With zebra striping on sub list
- Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
- List item 1 sub item 1
- List item 1 sub item 2
- List item 1 sub item 3
- List item 2
-
List item 3
Second paragraph
- List item 4
- List item 4 sub item 1
- List item 4 sub item 2
- List item 4 sub item 3
View code
<ol class="lst-stps stps-strpd">
<li>...
<ol class="lst-stps-sub stps-strpd">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
</li>
<li>...</li>
<li>...</li>
<li>...
<ol class="lst-stps-sub stps-strpd">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
</li>
</ol>Steps as a <div>/<section>
Default design
Step 1 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 2 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 3 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<section class="lst-stps">
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
</div>
</section>With zebra stripping
Step 1 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 2 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 3 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<section class="lst-stps stps-strpd">
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
</div>
</section>Steps as a <div>/<section> with sub-steps (nested <div>/<section>)
Default design
Step 1 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 1a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 2 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 3 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
View code
<section class="lst-stps">
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</div>
</section>
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</div>
</section>
</div>
</section>With zebra stripping
Step 1 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 1a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 2 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 3 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
View code
<section class="lst-stps stps-strpd">
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</div>
</section>
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</div>
</section>
</div>
</section>With zebra stripping on sub list
Step 1 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 1a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 1c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 2 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 3 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4 Heading goes here
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
Step 4a Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4b Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
Step 4c Heading goes here
Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
View code
<section class="lst-stps stps-strpd">
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</div>
</section>
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</div>
<div class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<section class="lst-stps-sub">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</div>
</section>
</div>
</section>Page details
- Date modified: