List

The list module m-list represents any list related objects such as navigations, category lists etc.

<ul class="m-list">
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
</ul>

Spacing

There are 3 modifiers that vary the spacing between list items -tight, -narrow, and -wide. These spaces are based on the vertical rhythm variables.

  • Tight List
  • List Item
  • List Item
  • List Item
  • Narrow List
  • List Item
  • List Item
  • List Item
  • Wide List
  • List Item
  • List Item
  • List Item
<ul class="m-list -tight">
  <li class="m-list__item">Tight List</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
</ul>
<ul class="m-list -narrow">
  <li class="m-list__item">Narrow List</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
</ul>
<ul class="m-list -wide">
  <li class="m-list__item">Wide List</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
</ul>

Direction

List items run vertically by default but can be horizontal using the -inline modifier.

  • List Item
  • List Item
  • List Item
  • List Item
<ul class="m-list -inline -narrow">
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
  <li class="m-list__item">List Item</li>
</ul>