User Manual

List

A standard way of visualising a list of elements. This can be either a list of textual items or a list of links.

Default

The default list component makes sure that each item is prefixed with a bullet-dot.

  • item 1
  • item 2
  • item 3

    
      



<ul class="m-list ">
  

    <li>item 1</li>

  

    <li>item 2</li>

  

    <li>item 3</li>

  
</ul>

Definition grid

A definition list consists out of items that are represented by a term and a data or description of that term. By applying the modifier m-list--definition-grid the term and description are placed i a grid. This can be combined with other modifiers like m-list--small to makes sure that the list is set in a smaller font-size.

  • m-list--definition-grid
  • m-list--small (optional)
  • term1 description1
  • term2 description2
  • term3 description3 

    
      



<ul class="m-list m-list--definition-grid m-list--small">
  

   <li class="m-list__item">
      <span class="m-list__term">term1</span>

      <span class="m-list__data">description1</span>
   </li>

  

   <li class="m-list__item">
      <span class="m-list__term">term2</span>

      <span class="m-list__data">description2</span>
   </li>

  

   <li class="m-list__item">
      <span class="m-list__term">term3</span>

      <span class="m-list__data">description3</span>
   </li>

  
</ul>

Definition

A definition list consists out of items that are represented by a term and a data or description of that term. By applying the modifier m-list--definition the term and description are placed on opposite sides. This can be combined with other modifiers like m-list--small to makes sure that the list is set in a smaller font-size.

  • m-list--definition
  • m-list--small (optional)
term1
description1
term2
description2
term3
description3

    
      

  

<dl class="m-list m-list--definition m-list--small">
  

    <dt class="m-list__term">term1</dt>
    <dd class="m-list__data">description1</dd>

  

    <dt class="m-list__term">term2</dt>
    <dd class="m-list__data">description2</dd>

  

    <dt class="m-list__term">term3</dt>
    <dd class="m-list__data">description3</dd>

  
</dl>

No type

Removes the standard browser bullet-type from each item.

  • item 1
  • item 2
  • item 3

    
      



<ul class="m-list m-list--no-type">
  

    <li>item 1</li>

  

    <li>item 2</li>

  

    <li>item 3</li>

  
</ul>

With icons

Modifier of the default list which allows for icons to be defined on each li-element.

  • item 1
  • item 2
  • item 3

    
      

	

<ul class="m-list m-list--with-icons ">
  

    <li class="m-list__item  icon-checkmark">item 1</li>

  

    <li class="m-list__item  icon-checkmark">item 2</li>

  

    <li class="m-list__item  icon-checkmark">item 3</li>

  
</ul>

Modifiers

  • m-list--no-type

    By default a list contains butllets to represent each separate element, this modifier removes these bullets.

  • m-list--definition

    Used in combination with a <dl> or definition list, this will make sure that the term is placed on the left and the data is placed on the right.

  • m-list--definition-grid

    Used in combination with a <dl> or definition list in a grid

  • m-list--small

    Decrease the font size of each list item from its default font-size.

  • m-list--with-icons

    Modifier of the default list which allows for icons to be defined on each <li> element.

  • m-list__item--bold

    Modifier applied to an item of a list to make sure the text is rendered bold