Steps working example
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>Détails de la page
- Date de modification :