Lists

Documentation for list component and its items. Lists present multiple line items in a vertical arrangement as a single continuous element.

Files

app/styles/modules/_lists.scss

Lists

List is basic container for list items and can be created by using class .list on <ul> element. Bordered list can be created by using additional class .list--bordered and clean list with additional class .list--clean.

Note

You do not have to use <ul> element but HTML structure have to be same.

Example:

Basic list

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Deserunt id consectetur esse in.

Bordered list

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Deserunt id consectetur esse in.

Clean list

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Deserunt id consectetur esse in.

Condensed list

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Deserunt id consectetur esse in.
Code:
<!-- basic list -->
<ul class="list">
  <li class="list__item">... </li>
  ...
</ul>

<!-- bordered list -->
<ul class="list">
  <li class="list__item">... </li>
  ...
</ul>

<!-- clean list -->
<ul class="list">
  <li class="list__item">... </li>
  ...
</ul>

<!-- condensed list -->
<ul class="list">
  <li class="list__item">... </li>
  ...
</ul>

Items

Items are core elements of lists. The most basic list item contains only text and can be created by wrapping text into element with class .list__item.

Example:
  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Deserunt id consectetur esse in.
Code:
<ul class="list">
  <li class="list__item">Laborum laboris amet minim. </li>
  <li class="list__item">Quis adipisicing eu consectetur.</li>
  <li class="list__item">Et anim sit do nisi.</li>
  <li class="list__item">Deserunt id consectetur esse in.</li>
</ul>

Item content

Content of item can be any UI element, thus is easy to create items with headlines and texts, or buttons and form components as shown in example below.

Example:

Item content example

  • Commodo dolore
    Eu qui ut laborum
  • Veniam veniam
    Veniam sit eu.

Item content example 2

  • Exercitation Ut eu nostrud voluptate commodo exercitation in amet voluptate proident reprehenderit.

  • Sint aute labore mollit sunt aliqua sed ut minim laborum adipisicing.

Item content example 3

  • Sint aute labore mollit sunt aliqua sed ut minim laborum adipisicing.

  • Exercitation Ut eu nostrud voluptate commodo exercitation in amet voluptate proident reprehenderit.

Code:
<!-- content example 1 -->
<ul class="list">
  <li class="list__item">
    <dl>
      <dt>Commodo dolore</dt>
      <dd>Eu qui ut laborum</dd>
    </dl>
  </li>
  <li class="list__item">
    <dl>
      <dt>Veniam veniam</dt>
      <dd>Veniam sit eu.</dd>
    </dl>
  </li>
</ul>

<!-- content example 2 -->
<ul class="list">
  <li class="list__item">
    <p>...</p>
  </li>
  <li class="list__item">
    <p>...</p>
  </li>
</ul>

<!-- content example 3 -->
<ul class="list">
  <li class="list__item">
    <p class="no-mrg">...</p>
  </li>
  <li class="list__item">
    <p class="no-mrg">...</p>
  </li>
  <li class="list__item">
    <button class="btn btn-full" type="button">Load more</button>
  </li>
</ul>

Item clickable

In case that item is clickable, you can add styles for interaction as selected or hover with additional class .list__item--clickable.

Note

Clickable items can have states: .is-selected and .is-disabled.

Note

Clickable items must be focusable and that can achieved with tabindex="0" attribute.

Example:
  • Commodo dolore
    Eu qui ut laborum
  • Selected
    Veniam sit
  • LEiusmod in nulla tempor
    Veniam sit
  • Disabled
    Veniam sit
Code:
<ul class="list">
  <li class="list__item list__item--clickable" tabindex="0">
    ...
  </li>
  <li class="list__item list__item--clickable is-selected" tabindex="0">
    ...
  </li>
  <li class="list__item list__item--clickable is-disabled">
    ...
  </li>
</ul>

Item sections

List items can split into (contain) more sections.

  • .list__item__section--secondary only takes space it needs
  • .list__item__section--primary fills all available space
  • .list__item__section--image has fixed width and is great for showing images, icons, etc.

Section secondary

In case you want to use secondary content on either side of the list item you can use section .list__item__section--secondary as shown in example below.

Example:

  • Veniam ea minim labore consectetur dolor.

    Commodo qui

  • Dolor cupidatat

    Id consectetur et.

  • Commodo dolore
    Eu qui ut laborum
  • Ut velit incididunt
    Dolore aliqua
Code:
<ul class="list">
  <li class="list__item">
    <div class="list__item__section--primary">
      ...
    </div>
    <div class="list__item__section--secondary">
      ...
    </div>
  </li>
  <li class="list__item">
    <div class="list__item__section--secondary">
      ...
    </div>
    <div class="list__item__section--primary">
      ...
    </div>
  </li>
  <li class="list__item">
    <div class="list__item__section--primary">
      ...
    </div>
    <div class="list__item__section--secondary">
      <button class="btn" type="button">Action</button>
    </div>
  </li>

  <li class="list__item">
    <div class="list__item__section--primary">
      ...
    </div>
    <div class="list__item__section--secondary">
      ...
    </div>
  </li>
</ul>

Section image

In case you want to use an image in list item, you can use section .list__item__section--image as shown in example below.

Example:
  • Commodo dolore
    Eu qui ut laborum
  • Ut velit incididunt
    Dolore aliqua
Code:
<ul class="list">

  <li class="list__item">
    <div class="list__item__section--image">
      image
    </div>
    <div class="list__item__section--primary">
      ...
    </div>
  </li>

  <li class="list__item">
    <div class="list__item__section--image">
      image
    </div>
    <div class="list__item__section--primary">
      ...
    </div>
  </li>
</ul>

Section alignment

List item sections are compatible with flexbox alignment classes.

Example:

Vertical alignment top

  • Lorem ipsum

    Commodo dolore
    Eu qui ut laborum

  • Lorem ipsum

    Ut velit incididunt
    Dolore aliqua

Vertical alignment bottom

  • Lorem ipsum

    Commodo dolore
    Eu qui ut laborum

  • Lorem ipsum

    Ut velit incididunt
    Dolore aliqua
Code:
<!-- alignment top -->
<ul class="list">
  <li class="list__item">
    <div class="list__item__section--primary">
      ...
    </div>
    <div class="list__item__section--secondary align-self-top">
      ...
    </div>
  </li>
  ...
</ul>

<!-- alignment bottom -->
<ul class="list">
  <li class="list__item">
    <div class="list__item__section--primary">
      ...
    </div>
    <div class="list__item__section--secondary align-self-bottom">
      ...
    </div>
  </li>
  ...
</ul>

List item section break

It might happen you will need to break a list item into multiple lines. This can be achieved using .list__item__section--break. You can even specify on which breakpoint it should become active with visibility classes.

Example:

  • This text will move under the image on S and XS

  • This text will move under the image on M and larger

Code:
<ul class="list">
  <li class="list__item">
    <div class="list__item__section--image">...</div>
    <div class="list__item__section--break hide-m"></div>
    <div class="list__item__section--primary">...</div>
  </li>
  <li class="list__item">
    <div class="list__item__section--image">...</div>
    <div class="list__item__section--break show-m"></div>
    <div class="list__item__section--primary">...</div>
  </li>
</ul>