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/components/config.scss
app/styles/components/style.scss

Lists

List is basic container for list items and can be created by using class .list on <ul> element.

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.

Condensed-v list

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

Scrollable list

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

Note

a scrollable list needs an inline height

Code:
<!-- basic list -->
<ul class="list">
  <li class="list__item">... </li>
  ...
</ul>

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

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

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

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

<!-- scrollable list -->
<ul class="list list--scrollable" style="max-height: 250px;">
  <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.

A recently added list item may get .is-new state class to indicate it has been successfully added. A grey list item uses .is-empty or .list-item--grey class.

Example:
  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
  • Et anim sit do nisi.
  • Mattis Dapibus Justo Lorem
  • Mattis Dapibus Justo Lorem
  • 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 is-new">Mattis Dapibus Justo Lorem</li>
  <li class="list__item is-empty/list__item--grey">Mattis Dapibus Justo Lorem</li>
  <li class="list__item is-disabled">Deserunt id consectetur esse in.</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 accept state states:

  • .is-selected
  • .is-disabled
  • .is-activated

Note

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

Example:
  • Commodo dolore
    Eu qui ut laborum
  • Selected
    Veniam sit
  • Activated
    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>

Headers

List headers are used to section collapsed lists and show some context. In modern browsers, the heading sticks to the top of a scrollable pane.

Example:

List 1

List 2

Code:
<div class="pane">
  <div class="pane__body">
    <div class="list-header">

      <h2 class="h5 text-regular mb-none">...</h2>
      <ul class="list is-collapsed mb-none">...</ul>

      <h2 class="h5 text-regular mb-none">...</h2>
      <ul class="list is-collapsed mb-none">...</ul>

    </div>
  </div>
</div>

List examples

List example #1

Example:
Code:
<ul class="list list--bordered">

  <li class="list__item list__item--clickable" tabindex="0">
    <div class="bar mb-none">

      <div class="bar__item align-self-top">
        <div class="checkbox text-vat">
          ...
        </div>
      </div>

      <div class="bar__item bar__item--fill">
        <div class="bar mb-small">

          <div class="bar__item">
            <h4 class="text-regular">...</h4>
          </div>

          <div class="bar__item">
            <div class="bar bar--small mb-none">
              <div class="bar__item"><span class="text-color-grey">...</span></div>
              <div class="bar__item"><span class="text-color-grey">...</span></div>
            </div>
          </div>

          <div class="bar__item">
            <div class="badges">
              ...
            </div>
          </div>

        </div>
        <div class="bar mb-none">

          // @TODO refactor badges
          <div class="bar__item"><span>St</span>&nbsp;&nbsp;<span>WSJT</span>&nbsp;&nbsp;<span class="text-color-success">SME</span></div>

        </div>
      </div>

      <div class="bar__item">
        <div class="bar bar--small mb-none">

          <div class="bar__item">
            <button>
              ...
            </button>
          </div>

          <div class="bar__item">
            <div class="btn-dropdown">
              ...
            </div>
          </div>

          <div class="bar__item">
            <span class="... list__item--clickable__control">
            ...
            </span>
          </div>
        </div>
      </div>
    </div>
  </li>

  ...

</ul>

List example #2

Example:

  • New QZ

    16. 10. 2017 – 03:43

    Danny Moss

  • New QZ

    16. 10. 2017 – 03:43

    Danny Moss

  • New QZ

    16. 10. 2017 – 03:43

    Danny Moss

  • New QZ

    16. 10. 2017 – 03:43

    Danny Moss

Code:
<ul class="list list--bordered">
  <li class="list__item list__item--clickable" tabindex="0">
    <div class="bar">

      <div class="bar__item bar__item--fill">
        <h4 class="text-regular">...</h4>
        <p class="text-color-grey">...</p>
        <p class="text-color-grey">...</p>
      </div>

      <div class="bar__item">
        ...
      </div>

    </div>
  </li>

  ...

</ul>

List example #3

Example:
  • STD

    New QZ

    16. 10. 2017 – 03:43
    Danny Moss
  • STD

    New QZ

    16. 10. 2017 – 03:43
    Danny Moss
  • STD

    New QZ

    16. 10. 2017 – 03:43
    Danny Moss
Code:
<ul class="list list--bordered">
  <li class="list__item list__item--clickable" tabindex="0">
    <div class="bar">

      <div class="bar__item bar__item--fill">
        <div class="bar mb-none">

          <div class="bar__item">...</div>

          <div class="bar__item">
            <h4 class="text-regular">...</h4>
          </div>

          <div class="bar__item"><span class="text-color-grey">...</span></div>
          <div class="bar__item"><span class="text-color-grey">...</span></div>

        </div>
      </div>

      <div class="bar__item">
        ...
      </div>

    </div>
  </li>

  ...

</ul>

List example #4

Example:

  • Der Standard

    p. 14-21
    16. 10. 2017 – 03:43

    Hurrican Catrina Strikes in Pacific

    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this

  • Der Standard

    p. 14-21
    16. 10. 2017 – 03:43

    Hurrican Catrina Strikes in Pacific

    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this

  • Der Standard

    p. 14-21
    16. 10. 2017 – 03:43

    Hurrican Catrina Strikes in Pacific

    A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this

Code:
<ul class="list list--bordered">
  <li class="list__item">
    <div class="bar mb-none">

      <div class="bar__item align-self-top">
        <div class="checkbox text-vat">
          ...
        </div>
      </div>

      <div class="bar__item bar__item--fill">
        <div class="bar bar--small mb-small">

          <div class="bar__item">
            <h4 class="text-regular">
              <span class="icon icon--medium ...">
                ...
              </span>
              ...
            </h4>
          </div>

          <div class="bar__item"><span class="text-color-grey">...</span></div>
          <div class="bar__item"><span class="text-color-grey">...</span></div>

          <div class="bar__item">
            <span class="icon icon--medium ...">
              ...
            </span>
          </div>
        </div>

        <p class="text-color-grey"><strong>...</strong></p>
        <p class="text-color-grey">...</p>

      </div>

      <div class="bar__item">
        <div class="bar bar--small mb-none">

          <div class="bar__item">
            <div class="btn-dropdown">
              ...
            </div>
          </div>

          <div class="bar__item">
            ...
          </div>

          <div class="bar__item">
            ...
          </div>

        </div>
      </div>
    </div>
  </li>
</ul>

List example #5 - collapsible lists

Lists can collapse to show condensed information. This behavior is dependent on .is-expanded/.is-collapsed visibility utilities on it's ancestor element (or the list itself) and .show-expanded and .show-collapsed classes on elements which need to be shown/hidden.

Note

a collapsed .list--bordered will have its border-width reset to 0, due to specific design implementation.

Example:
Code:
<button type="button" data-toggle="self, [data-collapsible]" data-toggle-text="Expand">Collapse</button>

<div class="is-expanded" data-collapsible="" data-toggle-class="is-expanded is-collapsed">
  <ul class="list list--bordered">
    <li class="list__item list__item--clickable">
      <div class="bar mb-none show-expanded">
        ...
      </div>
      <div class="bar show-collapsed">
        ...
      </div>
    </li>

    ...

  </ul>
</div>