Lists

Documentation for lists and list components.

Files

app/styles/modules/_lists.scss

Lists

List can be created by using class .list on <ul> element.

Example:code
Code:
<ul class="list">
  <li class="list_item">
    <div class="list_item_content">
      <div class="list-figure">
        <div class="list-figure_avatar">
          ...
        </div>
        <ul class="list-figure_items">
          <li class="list-figure_item">
            <h3>Aroma Room 1</h3>
          </li>
          <li class="list-figure_item">
            <p class="text-color-theme-300">50% • 5 appointments</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="list_item_actions">
      ...
    </div>
  </li>
  <li class="list_item">
    ...
  </li>
</ul>

List item active

List item has active state with additional class .active.

Example:code

    • Aroma Room

    • 50% • 5 appointments

Code:
<li class="list_item active">
  <div class="list_item_content">
    ...
  </div>
</li>

List item clickable

List item can be made clickable with additional classes .list_item-clickable on list item and .list_item_content-clickable on content section. This adds hover state and appropriate cursor format.

Warning

If list item contains any interactive elements, click event handler needs to handle these actions to prevent triggering multiple actions.

List item with avatar

List item can contain avatar as image or if image is unavailable, placeholder can be shown.

Example:code

    • Aroma Room

    • 50% • 5 appointments

    • Aroma Room

    • 50% • 5 appointments

Code:
<li class="list_item">
  <div class="list_item_content">
    <div class="list-figure">
      <div class="list-figure_avatar">
        <div class="list-figure_avatar_placeholder"></div>
      </div>
      ...
    </div>
  </div>
  ...
</li>
<li class="list_item">
  <div class="list_item_content">
    <div class="list-figure">
      <div class="list-figure_avatar">
        <img class="list-figure_avatar_img" src="/images/avatar.png">
      </div>
      ...
    </div>
  </div>
  ...
</li>

List item with multiple actions

List item actions are grouped on right side. Actions should in form of buttons or dropdowns with more actions.

Example:code
Code:
<li class="list_item">
  ...
  <div class="list_item_actions">
    <div class="btn-line">
      <button class="btn btn-s" type="button">Add venue</button>
      <div class="btn-dropdown">
        <button class="btn btn-link btn-s btn-icon-only js-toggle" type="button" icononly="iconOnly" data-target="parent" data-toggle="dropdown">
          <i class="icon icon-m">more</i>
        </button>
        <ul class="dropdown-list dropdown-list-right">
          <li><a class="dropdown-list_item">Action 1</a></li>
          ...
        </ul>
      </div>
    </div>
  </div>
</li>

List with icons

Classic type of list with custom icons. Use .list and .list--with-icons classes on ul element and add .list__icon class to an icon in every li element.

Example:code
  • List item 1
  • chevronrightList item 2
  • starList item 3
Code:
<ul class="list list--with-icons">
  <li><i class="icon icon-check list__icon"></i>List item 1</li>
  <li><i class="icon list__icon">chevronright</i>List item 2</li>
  <li><i class="icon list__icon">star</i>List item 3</li>
</ul>

List dropdown

To create dropdown list, wrap .list-header.js-toggle and ul.list in .list-dropdown.

Example:code

List 1 (7th generation)chevrondown
Code:
<div class="list-dropdown">
  <div class="list-header js-toggle active" data-target="next">
    <h3>Venue item 1<span class="list-header-text">(6 bookings)</span><i class="icon icon-s">chevrondown</i></h3>
  </div>
  <ul class="active list" dropdown="dropdown" header="Venue item 1" headertext="(6 bookings)">
    <li class="list_item list_item-clickable pad-15-horizontal">
      <a class="list_item_content list_item_content-clickable" href="#" clickable="clickable">
        <div class="list-figure has-date">
          <ul class="list-figure_items">
            <li class="list-figure_item">
              <p class="list-item-date">16 MAY 18:00</p>
            </li>
            <li class="list-figure_item">
              <h4>Nail Polish • 30 min</h4>
            </li>
            <li class="list-figure_item">
              <p class="text-color-theme-300">Helena Vatrtová • Venue 1, Room 2</p>
            </li>
          </ul>
        </div>
      </a>
      <div class="list_item_actions">
        <div class="list-figure">
          <ul class="list-figure_items">
            <li class="list-figure_item">
              <p class="price text-bold text-color-blue">10 EUR</p>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="list_item list_item-clickable pad-15-horizontal">
      ...
    </li>
  </ul>
</div>