Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Styles

Lists

Ordered List

What does it do?

  • Shows a list of related items in a specific order. List items are marked with numbers.

When to use it?

  • When you want to show that items follow a specific order.

When not to use it?

  • When the order of list items is not relevant.

How to use it?

  • List items should have similar line lengths so the one doesn’t overpower another.
  • Start first list with 1, and second with 1.1, third 1.1.1 and fourth with 1.1.1.1.

  1. Level 2
    1. Level 3
      1. Level 4
      2. Level 4
        1. Level 5
          1. Text
            • a
            • b
            • c
      3. Level 4
    2. Level 3
  2. Level 2


  1. Text
    1. Text
      1. Text
      2. Text
        1. Text
      3. Text
    2. Text
  2. Text

HTML markup
<ol class='wmnds-ordered-list'>
  <li class='h2'>Level 2
    <ol>
      <li class='h3'>Level 3
        <ol>
          <li class='h4'>Level 4</li>
          <li class='h4'>Level 4
            <ol>
              <li class='h5'>Level 5
                <ol>
                  <li>Text</li>
                  <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                  </ul>
                </ol>
              </li>
            </ol>
          </li>
          <li class='h4'>Level 4</li>
        </ol>
      </li>
      <li class='h3'>Level 3</li>
    </ol>
  </li>
  <li class='h2'>Level 2</li>
</ol>
<br /><br />
<ol class='wmnds-ordered-list'>
  <li>Text
    <ol>
      <li>Text
        <ol>
          <li>Text</li>
          <li>Text
            <ol>
              <li>Text</li>
            </ol>
          </li>
          <li>Text</li>
        </ol>
      </li>
      <li>Text</li>
    </ol>
  </li>
  <li>Text</li>
</ol>

Unordered List

What does it do?

  • Shows a list of items in no particular order

When to use it?

  • When the order of the items is not relevant. List items are marked with a bullet.

When not to use it?

  • When order of list items is relevant and needs to follow a specific order.

How to use it?

  • List items should have similar line lengths, doesn’t overpower another.
  • Include related items that are a similar level of importance.

  • Level 2
    • Level 3
      • Level 4
      • Level 4
        • Level 5
          • Text
            1. a
            2. b
              1. bb
            3. c
            4. d
      • Level 4
    • Level 3
  • Level 2


  • Text
    • Text
      • Text
        • Text

HTML markup
<ul class='wmnds-unordered-list'>
  <li class='h2'>Level 2
    <ul>
      <li class='h3'>Level 3
        <ul>
          <li class='h4'>Level 4</li>
          <li class='h4'>Level 4
            <ul>
              <li class='h5'>Level 5
                <ul>
                  <li>Text</li>
                  <ol class='wmnds-ordered-list'>
                    <li>a</li>
                    <li>b
                      <ol class='wmnds-ordered-list'>
                        <li>bb</li>
                      </ol>
                    </li>
                    <li>c</li>
                    <li>d</li>
                  </ol>
                </ul>
              </li>
            </ul>
          </li>
          <li class='h4'>Level 4</li>
        </ul>
      </li>
      <li class='h3'>Level 3</li>
    </ul>
  </li>
  <li class='h2'>Level 2</li>
</ul>
<br /><br />
<ul class='wmnds-unordered-list'>
  <li>Text
    <ul>
      <li>Text
        <ul>
          <li>Text
            <ul>
              <li>Text</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>