Skip to main content

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>