Components

Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.

List

Use class .List for a basic list without decoration.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Curabitur viverra ante enim
Lorem ipsum:
dolor sit amet
Lorem ipsum:
dolor sit amet

<!-- Ordered list -->
<ul class="List">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Curabitur viverra ante enim</li>
</ul>
 
<!-- Definition list -->
<dl class="List">
  <dt>Lorem ipsum:</dt>
  <dd>dolor sit amet</dd>
  <dt>Lorem ipsum:</dt>
  <dd>dolor sit amet</dd>
</dl>

List inline

Use class .List--inline to generate a list inline without gutter between list items.

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3

<ul class="List List--inline">
  <li>Lorem ipsum 1</li>
  <li>Lorem ipsum 2</li>
  <li>Lorem ipsum 3</li>
</ul>

Numbered list

Use class .List and .List--ordered to generate a numbered list.

  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum

<ol class="List List--ordered">
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ol>

Lists with bullets

Use class .List and .List--bullet to add bullets to the list.

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum

<ul class="List List--bullet">
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>