List

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>