Lists

Objects to enhance the use of Lists.

Dependencies

🔗

Lists are an incredibly versatile markup tool. To make life easier, Toolkit surfaces 3 different list objects for use on unordered lists <ul> or ordered lists <ol>:

List Bare

Remove indents and bullet points from any list.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-bare">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List Block

Display any list of items as a collection of stacked blocks.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-block">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List Inline

Display any list of items as a single line.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-inline">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Modifiers

Narrow

Reduce the inline spacing by half.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-inline o-list-inline--narrow">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Wide

Double the inline spacing.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-inline o-list-inline--wide">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Flush

Remove all inline spacing.

  • Item 1
  • Item 2
  • Item 3
<ul class="o-list-inline o-list-inline--flush">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>