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.
- 2022-11 - added possible alternative design (lead zero) as a more minimalist pattern.
Todo and for future consideration
- Write governance and rationale for the use of both designs
Sponsor: CRA - Christopher Oakes (@christopher-o)
Classes used
lst-stpsld-zrstps-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.
- Test
- Test 2
- List item 2
-
List item 3
Second paragraph
-
Header here
Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<ol class="lst-stps">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>Leading zero 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
-
Header here
Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<ol class="lst-stps ld-zr">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>Default design striped
- 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
-
Header here
Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<ol class="lst-stps ld-zr">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>Leading zero design striped
- 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
-
Header here
Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.
View code
<ol class="lst-stps ld-zr">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>Steps as an <ol> with sub-steps (nested <ol>) and headers
Default design
-
Header for step 1
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.
-
Header for sub step 1a
List item 1 sub item 1
-
Header for sub step 1b
List item 1 sub item 1
-
Header for sub step 1c
List item 1 sub item 1
-
-
Header for step 2
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.
-
Header for step 3
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.
-
Header for step 4
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 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>Leading zero design
-
Header for step 1
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.
-
Header for sub step 1a
List item 1 sub item 1
-
Header for sub step 1b
List item 1 sub item 1
-
Header for sub step 1c
List item 1 sub item 1
-
-
Header for step 2
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.
-
Header for step 3
Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.
-
Header for step 4
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 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>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.
-
Header 1
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>With zebra striping on sub list (Leading zero)
- 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.
-
Header here
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 ld-zr 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>With zebra striping on sub list (Leading zero)
- 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.
-
Header here
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
-
Header here
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> 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
<div class="lst-stps">
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</section>
</div>
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</section>
</div>
</section>
</div>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
<div class="lst-stps stps-strpd">
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</section>
</div>
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</section>
</div>
</section>
</div>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
<div class="lst-stps stps-strpd">
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 1</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 1a</span> Heading goes here</h3>
...
</section>
</div>
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 2</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 3</span> Heading goes here</h2>
...
</section>
<section class="lst-stps-itm">
<h2><span class="wb-inv">Step 4</span> Heading goes here</h2>
...
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h3><span class="wb-inv">Step 4a</span> Heading goes here</h3>
...
</section>
</div>
</section>
</div>Leading zero 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
<div class="lst-stps ld-zr">
<section class="lst-stps-itm">
<h4><span class="wb-inv">Step 1</span> Heading goes here</h4>
<p>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.</p>
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 1a</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 1b</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 1c</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
</div>
</section>
<section class="lst-stps-itm">
<h4><span class="wb-inv">Step 2</span> Heading goes here</h4>
<p>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.</p>
</section>
<section class="lst-stps-itm">
<h4><span class="wb-inv">Step 3</span> Heading goes here</h4>
<p>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.</p>
</section>
<section class="lst-stps-itm">
<h4><span class="wb-inv">Step 4</span> Heading goes here</h4>
<p>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.</p>
<div class="lst-stps-sub">
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 4a</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 4b</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
<section class="lst-stps-itm">
<h5><span class="wb-inv">Step 4c</span> Heading goes here</h5>
<p>Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.</p>
</section>
</div>
</section>
</div>Page details
- Date modified: