Steps

Standard List

Default

List Item 1
List item 2
List item 3

View code

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

Zebra Styling

List item 1
List item 2
List item 3

View code

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

Steps with substeps

Standard

Main Content Goes Here
1. Sub Item
2. Sub Item
3. Sub Item
Main Content
Main Content
1. Sub Item
2. Sub Item
3. Sub Item

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>

Zebra Styling

Main Content
1. Sub Item
2. Sub Item
3. Sub Item
Main Content
Main Content
1. Sub Item
2. Sub Item
3. Sub Item

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>

Zebra Styling on Sub Items

Main Content
1. Sub Item
2. Sub Item
3. Sub Item
Main Content
Main Content
1. Sub Item
2. Sub Item
3. Sub Item

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>

Using Divs and Sections

Standard

Step 1 Header

Put Main Content Here

Step 2 Header

Put Main Content Here

Step 3 Header

Put Main Content Here

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>

Zebra Styling

Step 1 Header

Put Main Content Here

Step 2 Header

Put Main Content Here

Step 3 Header

Put Main Content Here

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 Using Divs and Sections with Sub Items

Default

Step 1 Header

Put Main Content Here

Step 1a Sub Header

Put Sub Content Here

Step 2 Header

Put Main Content Here

Step 3 Header

Put Main Content Here

Step 3a Sub Header

Put Sub Content Here

Step 3b Sub Header

Put Sub Content Here

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>

Styling Zebra

Step 1 Header

Put Main Content Here

Step 1a Sub Heading

Put Sub Content Here

Step 2 Header

Put Main Content Here

Step 3 Header

Put Main Content Here

Step 3a Sub Header

Put Sub Content Here

Step 3b Header

Put Sub Content Here

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>

Zebra Styling on Sub List

Step 1 Header

Put Main Content Here

Step 1a Header

Put Sub Content Here

Step 2 Header

Put Main Content Here

Step 3 Header

Put Main Content Here

Step 3a Header

Put Sub Content Here

Step 3b Header

Put Sub Content Here

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:: 2023-03-24