Patterns: Lists

Standard

1. This is an ordered list
2. It has numbers
3. As you can see
   1. And a nested one
   2. Looks like this
      1. And further nesting
      2. Is like this

<ol>
  <li>This is an ordered list</li>
  <li>It has numbers</li>
  <li>As you can see
    <ol>
      <li>And a nested one</li>
      <li>Looks like this
        <ol>
          <li>And further nesting</li>
          <li>Is like this</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

• But this list
• Has bullets
• Instead of numbers
  • And a
  • nested list
• You see?

<ul>
  <li>But this list</li>
  <li>Has bullets</li>
  <li>Instead of numbers
    <ul>
      <li>And a</li>
      <li>nested list</li>
    </ul>
  </li>
  <li>You see?</li>
</ul>

Spaced

• This list also has bullets.
• But is more spaced out.
• And with a standard nested list too:
  • Item 1
  • Item 2
  • Item 3
• See?!

<ul class="list--spaced">
  <li>This list also has bullets.</li>
  <li>But is more spaced out.</li>
  <li>And with a standard nested list too:
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>See?!</li>
</ul>

Unstyled

• An
• Unstyled
• • A standard list
  • Is here
• List

<ul class="list--unstyled">
  <li>An</li>
  <li>Unstyled</li>
  <li>
    <ul>
      <li>A standard list</li>
      <li>Is here</li>
    </ul>
  </li>
  <li>List</li>
</ul>

Inline

• An
• Inline
• List

<ul class="list--inline">
  <li>An</li>
  <li>Inline</li>
  <li>List</li>
</ul>

Inline and unstyled

• An
• Inline
• Unstyled
• List

<ul class="list--inline list--unstyled">
  <li>An</li>
  <li>Inline</li>
  <li>Unstyled</li>
  <li>List</li>
</ul>

You might want to add a bullet to a single item in an inline unstyled list:

• Like before
• But one item
• Has a bullet!

<ul class="list--inline list--unstyled">
  <li>Like before</li>
  <li>But one item</li>
  <li class="list--inline__item--bullet">Has a bullet!</li>
</ul>

Definition lists

Sometimes

We might like to use a definition list.

They can be good for things

Like defining stuff.

In a list.

<dl>
  <dt>Sometimes</dt>
  <dd>We might like to use a definition list.</dd>
  <dt>They can be good for things</dt>
  <dd>Like defining stuff.</dd>
  <dd>In a list.</dd>
</dl>