List

By default, classless lists have bullets and margins. To remove the bullets and margins, simply add a class of list.

I'm an unordered list.
I have bullets and a margin.

I'm an unordered list, with a class of list.
I don't have bullets or a margin.

<ul>
  <li>I'm an unordered list.</li>
  <li>I have bullets and a margin.</li>
</ul>

<ul class="list">
  <li>I'm an unordered list, with a class of <code>list</code>.</li>
  <li>I don't have bullets or a margin.</li>
</ul>

List Inline

To make a list display it’s list items inline, simply add a modifier class of list--inline.

Item
Item
Item
Item
Item

<ul class="list  list--inline">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

List Checked

To create a checklist, add the list--checked modifier class.

Item 1
Item 2
Item 3
Item 4
Item 5

<ul class="list  list--checked">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Get Fancy

Add any number of object or utility classes to get super fancy with lists.

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

<ul class="list  list--checked  o-pack">
  <li class="o-pack-item">Item 1</li>
  <li class="o-pack-item">Item 2</li>
  <li class="o-pack-item">Item 3</li>
  <li class="o-pack-item">Item 4</li>
  <li class="o-pack-item">Item 5</li>
</ul>

<hr class="rule">

<ul class="list  list--checked">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="list-divider  u-pt2  u-mb2"></li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li><strong class="u-cursorHelp  u-borderBottom " data-tooltip="Hello!" data-tooltip-theme="dark">Item 5</strong></li>
</ul>