Language selection

Government of Canada / Gouvernement du Canada

Search

List steps

Style ordered list and divs with steps number in circles

GCWeb implementation plan

Todo and for future consideration

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

On this page

Basic configuration

Default steps list design

  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 for 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 for 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

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

Lead zero steps list design

With headers

  1. Header for step 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.

  2. Header for step 2

    Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.

    Duis euismod metus enim, id gravida nulla tincidunt eu. Vivamus rutrum nibh in dui pulvinar aliquam. Proin sit amet consectetur nisl, eget consectetur elit.

  3. Header for step 3

    Mauris ut consequat urna, sit amet interdum risus.Sed eu nulla ac nisl commodo laoreet nec eget ante.

    Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.

    Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus.

  4. Header for step 4

    Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.

Without headers

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Duis id nibh in nisi varius facilisis. Mauris dictum nisl eros, eget sodales risus auctor nec. Praesent eget sem est. Quisque quis magna turpis.
  2. Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero. Duis euismod metus enim, id gravida nulla tincidunt eu. Ut finibus convallis mi. Aenean in fermentum nisi, eu commodo metus. Vivamus vestibulum tincidunt nisl, quis dictum ante volutpat at.
  3. Sed eu nulla ac nisl commodo laoreet nec eget ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus. Proin tincidunt volutpat volutpat.
  4. Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.
View code 
<ol class="lst-stps ld-zr">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Sub (nested) lists

Default design

  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. 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.

    1. Topic/task hyperlink text for sub-step 2a

      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 sub-step 2b

      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 for sub-step 2c

      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 for 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. Header for step 4

    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.

    1. Topic/task hyperlink text for sub-step 4a
    2. Topic/task hyperlink text for sub-step 4b

Lead zero design

  1. Header for step 1

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.

    1. Header for sub step 1a

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    2. Header for sub step 1b

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    3. Header for sub step 1c

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  2. 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.

  3. Header for step 3

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.

  4. Header for step 4

    Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
    1. List item 4 sub item 1
    2. List item 4 sub item 2
    3. List item 4 sub item 3
View code 
//Default design
<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 design
<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

Default design

  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 for 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 for 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

Lead zero design

  1. Header for step 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Mauris dictum nisl eros, eget sodales risus auctor nec. Praesent eget sem est. Quisque quis magna turpis.

  2. Header for step 2

    Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor.

    Duis euismod metus enim, id gravida nulla tincidunt eu. Vivamus rutrum nibh in dui pulvinar aliquam. Proin sit amet consectetur nisl, eget consectetur elit. Ut finibus convallis mi. Aenean in fermentum nisi, eu commodo metus. Vivamus vestibulum tincidunt nisl, quis dictum ante volutpat at.

  3. Header for step 3

    Mauris ut consequat urna, sit amet interdum risus. Sed eu nulla ac nisl commodo laoreet nec eget ante.

    Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.

    Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem.

  4. Header for step 4

    Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.

View code 
//Default striped design
<ol class="lst-stps stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>
//Lead zero striped design
<ol class="lst-stps ld-zr stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Striped design for sub list

Default design with one of the sub lists striped

  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. Header for step 2 (striped design added for sub steps)

    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.

    1. Topic/task hyperlink text for sub-step 2a

      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 sub-step 2b

      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 for sub-step 2c

      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 for 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. Header for step 4 (no striped design added for sub steps)

    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.

    1. Topic/task hyperlink text for sub-step 4a
    2. Topic/task hyperlink text for sub-step 4b

Lead zero design with one of the sub lists striped

  1. Header for step 1 (striped design added for sub steps)

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.

    1. Header for sub step 1a

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    2. Header for sub step 1b

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    3. Header for sub step 1c

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  2. 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.

  3. Header for step 3

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.

  4. Header for step 4 (no striped design added for sub steps)

    Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
    1. List item 4 sub item 1
    2. List item 4 sub item 2
    3. List item 4 sub item 3
View code 
//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 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>

Start attribute

The list pattern is customized to follow the value of the start attribute from 2 up to the number 9.

Default steps list design

This example has the start attribute value of 3.

  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 for 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 for 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

View code 
<ol class="lst-stps" start="3">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Starting at step 2

  1. Example without heading of step starting at 2
  2. Example without heading of step following a step started at 2, expected to be 3.

Starting at step 4

  1. Example with heading of step starting at 4

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

  2. Example with heading of step following a step started at 4, expected to be 5

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

Starting at step 5

  1. Example with heading and section of step starting at 5

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

  2. Example with heading and section of step following a step started at 5, expected to be 6

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

Starting at step 6

  1. Example with heading of step starting at 6

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

    1. Topic/task hyperlink text for sub-step 6a

      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 sub-step 6b

      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 for sub-step 6c

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

  2. Example with heading of step following a step started at 6, expected to be 7

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

Starting at step 7

  1. Example with heading and section of step starting at 7

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

  2. Example with heading and section of step following a step started at 7, expected to be 8

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

Starting at step 8

  1. Example with heading and section of step starting at 8

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

  2. Example with heading and section of step following a step started at 8, expected to be 9

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

Starting at step 9

  1. Example with heading and section of step starting at 9

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

  2. Example with heading and section of step following a step started at 9, expected to be 10

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

Page details

Date modified: