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.

Level 2
1. Level 3
  1. Level 4
  2. Level 4
    1. Level 5
      1. Text
  3. Level 4
2. Level 3
Level 2

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

HTML markup

<ol class='wmnds-ordered-list'>
  <li class='wmnds-h2'>Level 2
    <ol>
      <li class='wmnds-h3'>Level 3
        <ol>
          <li class='wmnds-h4'>Level 4</li>
          <li class='wmnds-h4'>Level 4
            <ol>
              <li class='wmnds-h5'>Level 5
                <ol>
                  <li>Text</li>
                  <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                  </ul>
                </ol>
              </li>
            </ol>
          </li>
          <li class='wmnds-h4'>Level 4</li>
        </ol>
      </li>
      <li class='wmnds-h3'>Level 3</li>
    </ol>
  </li>
  <li class='wmnds-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
  - Level 4
- Level 3
Level 2

Text
- Text
  - Text
    - Text

HTML markup

<ul class='wmnds-unordered-list'>
  <li class='wmnds-h2'>Level 2
    <ul>
      <li class='wmnds-h3'>Level 3
        <ul>
          <li class='wmnds-h4'>Level 4</li>
          <li class='wmnds-h4'>Level 4
            <ul>
              <li class='wmnds-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='wmnds-h4'>Level 4</li>
        </ul>
      </li>
      <li class='wmnds-h3'>Level 3</li>
    </ul>
  </li>
  <li class='wmnds-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>