Lists

Different types of list elements

Lists are useful for listing out data, as unordered, ordered or when the data needs to be presented as key-value pairs. They are flexible in terms of responsiveness, unrestricted by the strict layout of tables which are more suited when multiple columns are needed for presenting data.

Unordered and ordered list

While the ul element represents an unordered list of items, rendered as a bulleted list, the ol element represents an ordered list, and is rendered as a numbered list. Both types of lists can also be freely nested inside one of the li elements.

The classes listed here are optional and will only in rare cases be needed.

Class	Declaration	Usage
list--none	`list-style-type: none; margin-left: 0;`	Optional Basic list without bullets or numbers.
list--bullets	`list-style-type: disc; margin-left: 1em;`	Optional List type as bullets
list--numbers	`list-style-type: decimal; margin-left: 1.6em;`	Optional List type as numbers

Unordered list

Acme Industries
Burgers and Beauty as
Rent-A-Cat Co.

Ordered list

Acme Industries
Burgers and Beauty as
Rent-A-Cat Co.

<ul>
  <li>Acme Industries</li>
  <li>Burgers and Beauty as</li>
  <li>Rent-A-Cat Co.</li>
</ul>

<ol>
  <li>Acme Industries</li>
  <li>Burgers and Beauty as</li>
  <li>Rent-A-Cat Co.</li>
</ol>

Read more about unordered list and ordered list on MDN.

Description list

The dl element represents a description list. The element encloses a list of groups of terms, specified using the dt element, and descriptions, provided by dd elements. Common uses for this element are to implement a glossary or to display metadata as a list of key-value pairs.

Unlike ul and ol elements, the dl element can consist of div elements as direct descendants. That is especially useful for grouping the dt and dd elements. Description lists can also be nested.

Class	Usage
mb-dlist	Optional Useful for rearranging tables

Grouped by `div`

Shipment: 123456789
Recipient: Burgers and Beauty as
Sent: 26.06.2016 14.12

With `mb-dlist` class

Shipment: 987654321
Recipient: Acme Industries
Sent: 14.07.2016 12.56

Shipment: 123456789
Recipient: Burgers and Beauty as
Sent: 26.06.2016 14.12

Shipment: 456789123
Recipient: Rent-A-Cat Co.
Sent: 02.05.2016 11.38

<dl class="owlm">
  <div>
    <dt>Shipment</dt>
    <dd><a href="#">123456789</a></dd>
  </div>
  <div>
    <dt>Recipient</dt>
    <dd>Burgers and Beauty as</dd>
  </div>
  <div>
    <dt>Sent</dt>
    <dd>26.06.2016 14.12</dd>
  </div>
</dl>

<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">987654321</a></dd>
  <dt>Recipient</dt>
  <dd>Acme Industries</dd>
  <dt>Sent</dt>
  <dd>14.07.2016 12.56</dd>
</dl>
<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">123456789</a></dd>
  <dt>Recipient</dt>
  <dd>Burgers and Beauty as</dd>
  <dt>Sent</dt>
  <dd>26.06.2016 14.12</dd>
</dl>
<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">456789123</a></dd>
  <dt>Recipient</dt>
  <dd>Rent-A-Cat Co.</dd>
  <dt>Sent</dt>
  <dd>02.05.2016 11.38</dd>
</dl>

Read more about description list on MDN.