Lists

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 or .list-no-borders.

Example:code

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.

List without borders

  • 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">... </li>
  ...
</ul>

Items

Items are content elements of lists. Items can contain text, avatars, actions and can be divided into more sections. The most basic item can be created by using class .list-item on element. Additionally list item can by condensed to smaller size with additional class .list_item-condensed.

Example:code

List items

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.

List items condensed

  • Laborum laboris amet minim.
  • Quis adipisicing eu consectetur.
Code: 
<ul class="list">
  <li class="list_item">... </li>
  ...
</ul>

<ul class="list">
  <li class="list_item list_item-condensed">... </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:code

Item with text

  • Commodo dolore

    Eu qui ut laborum

  • Veniam veniam

    Veniam sit eu.

Item with text 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 with button

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

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

  • Button
Code: 
<!-- item with text -->
<ul class="list">
  <li class="list_item"> 
    <h3 class="no-mrg">...</h3>
    <p class="text-note no-mrg">...</p>
  </li>
  <li class="list_item"> 
    <h3 class="no-mrg">...</h3>
    <p class="text-note no-mrg">...</p>
  </li>
</ul>

<!-- item with text 2 -->
<ul class="list">
  <li class="list_item"> 
    <p class="no-mrg"><strong>Exercitation Ut</strong> ...</p>
  </li>
  <li class="list_item"> 
    <p class="no-mrg">... <strong>laborum adipisicing</strong>.</p>
  </li>
</ul>

<!-- item with button -->
<ul class="list">
  ...
  <li class="list_item">
    <a class="btn btn-full">Button</a>
  </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.

Example:code

  • Commodo dolore

    Eu qui ut laborum

  • Veniam veniam

    Veniam sit eu.

  • Eu qui ut laborum

    Commodo dolore

Item closable / selectable

In case that item is closable or selectable, you can add styles for interaction with additional class .list_item-closable or .list_item-selectable.

Example:code

  • Exercitation Ut

    Eu qui ut laborum

    close

  • Veniam veniam

    Veniam sit eu.

    close
Code: 
<li class="list_item list_item-closable">
  <div class="list_item_sec-primary">
    ...
  </div>
  <div class="list_item_sec-action">
    <a class="btn btn-flat list_item_action-close">
      <i class="icon icon-m">close</i>
    </a>
  </div>
</li>

Item with avatar

Item with avatar can be created by using additional class .list_item-avatar and by wrapping content with list item sections .list_item_sec-secondary for avatar and .list_item_sec-primary for primary content.

Note

Check how to create avatar.

Example:code
  • Jane

    Commodo dolore

    Eu qui ut laborum

  • John

    Veniam veniam

    Veniam sit eu

  • Groups

    Exercitation Ut

Code: 
<ul class="list">

  <li class="list_item list_item-avatar">
    <div class="list_item_sec-secondary">
      <figure class="avatar avatar-state avatar-state-orange">
        <img src="/images/content/people/jane.jpg" alt="Jane" class="img-fluid img-circle">
      </figure>
    </div>
    <div class="list_item_sec-primary">
      <h3 class="no-mrg">Commodo dolore</h3>
      <p class="text-note no-mrg">Eu qui ut laborum</p>
    </div>
  </li>

  <li class="list_item list_item-avatar">
    <div class="list_item_sec-secondary">
      ...
    </div>
    <div class="list_item_sec-primary">
      ...
    </div>
  </li>

  <li class="list_item list_item-avatar">
    ...
  </li>
</ul>

Item with action

Item with actions on right side can be created by wrapping content with list item sections .list_item_sec-primary for primart content and .list_item_sec-action for actions.

Note

In case there are more actions, its recomended to use additional class .list_item_sec-size[1-3] to avoid breaking line of elements.

Note

Icon only information without button styles can by created with .list_item_sec-action-icon on icon element.

Example:code
Code: 
<ul class="list">

  <li class="list_item">
    <div class="list_item_sec-primary">
      ...
    </div>
    <div class="list_item_sec-action list_item_sec-size-1">
      <a class="btn btn-flat">
        <i class="icon icon-m">videocam</i>
      </a>
      <a class="btn btn-flat">
        <i class="icon icon-m">call</i>
      </a>
    </div>
  </li>

  <li class="list_item">
    <div class="list_item_sec-primary">
      ...
    </div>
    <div class="list_item_sec-action list_item_sec-size-1">
      ...
    </div>
  </li>
</ul>

Item with icon

Item with icon can be created by wrapping content with list item sections .list_item_sec-secondary for icon and .list_item_sec-primary for primary content.

Example:code
  • notifications

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

  • call_missed

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

Code: 
<ul class="list">

  <li class="list_item">
    <div class="list_item_sec-secondary">
      <i class="icon icon-m text-color-gray-400">notifications</i>
    </div>
    <div class="list_item_sec-primary">
      ...
    </div>
  </li>

  <li class="list_item">
    <div class="list_item_sec-secondary">
      ...
    </div>
    <div class="list_item_sec-primary">
      ...
    </div>
  </li>
</ul>

Item with state

Item with state can be created by wrapping content with list item sections .list_item_sec-state for state icon and .list_item_sec-primary for primary content. State icon can be created by using class .list_state-[success/warning/danger/inactive] on element inside list item section state.

Example:code

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

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

Code: 
<ul class="list">

  <li class="list_item">
    <div class="list_item_sec-state">
      <i class="list_state-success"></i>
    </div>
    <div class="list_item_sec-primary">
      ...
    </div>
  </li>

  <li class="list_item">
    <div class="list_item_sec-state">
      <i class="list_state-danger"></i>
    </div>
    <div class="list_item_sec-primary">
      ...
    </div>
  </li>
</ul>

Item combinations

You can combine item types together to create more complex list item structures. To combine item types just use additional classes and follow structure needed for particular items.

Warning

Do not combine item with avatar and item with icon.

Example:code

Item with avatar and actions

Clickable item with state and icon

  • notifications

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

  • call_missed

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

Code: 
<!-- items with avatar and actions -->
<ul class="list">
  <li class="list_item list_item-avatar">
    <div class="list_item_sec-secondary"> ... </div>
    <div class="list_item_sec-primary"> ... </div>
    <div class="list_item_sec-action list_item_sec-size-1"> ... </div>
  </li>
</ul>

<!-- clickable items with state and icon -->
<ul class="list">
  <li class="list_item list_item-clickable">
    <div class="list_item_sec-state">...</div>
    <div class="list_item_sec-secondary">...</div>
    <div class="list_item_sec-primary">.../p>
    </div>
  </li>
</ul>

Headers

Headers for list can be created same way as list items, except in content you should use <h4> tag for headline with additional classes .no-mrg and .text-color-theme. List header can be with or without action, as shown in examples below.

Example:code

Basic header

  • Header ea sint

  • Jane

    Commodo dolore

    Eu qui ut laborum

  • John

    Veniam veniam

    Veniam sit eu

Header with action

  • Header laborum

    add_circle
  • Jane

    Commodo dolore

    Eu qui ut laborum

  • John

    Veniam veniam

    Veniam sit eu

  • Header laborum

  • Jane

    Commodo dolore

    Eu qui ut laborum

  • John

    Veniam veniam

    Veniam sit eu

Code: 
<!-- basic header -->
<ul class="list">
  <li class="list_item">
    <div class="list_item_sec-primary">
      <h4 class="no-mrg text-color-theme">Header ea sint</h4>
    </div>
  </li>
  <li class="list_item list_item-avatar">
    ...
  </li>
  ...
</ul>

<!-- header with action -->
<ul class="list">
  <li class="list_item">
    <div class="list_item_sec-primary">
      <h4 class="no-mrg text-color-theme">Header laborum</h4>
    </div>
    <div class="list_item_sec-action">
      <a class="btn btn-flat"><i class="icon icon-m">add_circle</i>
      </a>
    </div>
  </li>
  <li class="list_item list_item-avatar">
    ...
  </li>
  ...
  <li class="list_item">
    <div class="list_item_sec-primary">
      <h4 class="no-mrg text-color-theme">Header laborum</h4>
    </div>
    <div class="list_item_sec-action">
      <select class="js-select">
        <option>All</option>
        <option>Lorem</option>
        <option>Ipsum</option>
      </select>
    </div>
  </li>
</ul>

List in dropdown

You can include list into dropdown list. Additionally, there is special .list_item-form element which can contain form elements such as buttons or inputs. You can combine it with .list_item_sec-state to get state icon before form element.

Example:code

  • Available

  • Na obede

  • Away

  • Offline

  • Don't disturb

  • headset_micCallcentrum

  • headset_micSukromná pauza

  • headset_micPracovná pauza

Code: 
<ul class="dropdown-list list">
  <li class="list_item">
    <div class="list_item_sec-state"><i class="list_state-success"></i></div>
    <div class="list_item_sec-primary">
      <p class="no-mrg">Available</p>
    </div>
  </li>
  <li class="list_item list_item-form">
    <div class="list_item_sec-primary">
      <p class="no-mrg">
        <button class="btn btn-secondary btn-full">Create custom status</button>
      </p>
    </div>
  </li>
  <li class="list_item list_item-form">
    <div class="list_item_sec-state"><i class="list_state-inactive"></i></div>
    <div class="list_item_sec-primary">
      <div class="input-w-button input-w-button-right">
        <input placeholder="Create Custom Status" class="input">
        <button class="btn btn-secondary">Ok</button>
      </div>
    </div>
  </li>
</ul>