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: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.

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 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>

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:code
  • 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:code

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 class="text-nospace">
      <dt>Commodo dolore</dt>
      <dd>Eu qui ut laborum</dd>
    </dl>
  </li>
  <li class="list_item"> 
    <dl class="text-nospace">
      <dt>Veniam veniam</dt>
      <dd>Veniam sit eu.</dd>
    </dl>
  </li>
</ul>

<!-- content example 2 -->
<ul class="list">
  <li class="list_item"> 
    <p class="text-nospace">...</p>
  </li>
  <li class="list_item"> 
    <p class="text-nospace">...</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: .selected and .disabled.

Example:code
  • 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"> 
    ...
  </li>
  <li class="list_item list_item-clickable selected">
    ...
  </li>
  <li class="list_item list_item-clickable disabled">
    ...
  </li>
</ul>

Item box

In case you need to create item that looks like white box, you can use additional class .list_item-box on .list_item element as shown in example below.

Example:code
  • Commodo dolore
    Eu qui ut laborum
  • Veniam veniam
    Veniam sit eu.
Code:
<ul class="list">
  <li class="list_item list_item-box"> 
    <dl class="text-nospace">
      <dt>Commodo dolore</dt>
      <dd>Eu qui ut laborum</dd>
    </dl>
  </li>
  <li class="list_item list_item-box"> 
    <dl class="text-nospace">
      <dt>Veniam veniam</dt>
      <dd>Veniam sit eu.</dd>
    </dl>
  </li>
</ul>

Item sections

List items can be also split into (or more specific they can contain) more sections. For primary content of list you would use .list_item_section-primary on section element. For other types of sections the class depends on type.

Section secondary

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

Example:code

  • Veniam ea minim labore consectetur dolor.

    Commodo qui

  • Id consectetur et.

    Dolor cupidatat

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-primary">
      ...
    </div>
    <div class="list_item_section-secondary">
      ...
    </div>
  </li>
</ul>

Section image

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

Example:code
  • 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 action

In case you want to use some action button in list item, you can use section .list_item_section-action as shown in example below.

Example:code
  • 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-action">
      <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-action">
      ...
    </div>
  </li>
</ul>

Section alignment

Content of list items is verticaly aligned to middle. In case you need to align it to top or bottom you can use additional classes like .list_item_section-va-top or .list_item_section-va-bottom.

Example:code

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-action list_item_section-va-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-action list_item_section-va-bottom">
      ...
    </div>
  </li>
  ...
</ul>

Subsections

There might be situations in which you will need to split item sections even into smaller subsections. In that case you can use .list_item_subsections element to wrap .list_item_subsection elements and create subsections as shown in example below.

Note

Subsections in secondary item sections are automaticaly aligned to right.

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

  <li class="list_item">

    <div class="list_item_section-primary">
      ...
    </div>

    <div class="list_item_section-secondary">
      <ul class="list_item_subsections">
        <li class="list_item_subsection">
          ...
        </li>
        <li class="list_item_subsection">
        ...
        </li>
      </ul>
    </div>

  </li>

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

Item collapsible

Example:code

  • Lorem ipsum

    Lorem ipsum Enim eu eu deserunt anim dolore laboris officia est cillum dolor Ut Duis cupidatat pariatur pariatur do ut magna Excepteur non sint enim ex reprehenderit aliquip ex dolore deserunt cupidatat.

  • Lorem ipsum

    Lorem ipsum Enim eu eu deserunt anim dolore laboris officia est cillum dolor Ut Duis cupidatat pariatur pariatur do ut magna Excepteur non sint enim ex reprehenderit aliquip ex dolore deserunt cupidatat.

Code:
<ul class="list">
  <li class="list_item list_item-box list_item-collapsible">
    <div class="list_item-collapsible_head js-toggle" data-target="parent">
      <div class="list_item_section-primary">
        <h4 class="text-nospace text-regular">Lorem ipsum</h4>
      </div>
      <div class="list_item_section-action list_item_section-va-top">
        <button class="btn btn-link-2 no-pad-right" type="button"><i class="icon icon-m">chevrondown</i></button>
      </div>
    </div>
    <div class="list_item-collapsible_content">
      <p class="text-nospace">Lorem ipsum Enim eu eu deserunt anim dolore laboris officia est cillum dolor Ut Duis cupidatat pariatur pariatur do ut magna Excepteur non sint enim ex reprehenderit aliquip ex dolore deserunt cupidatat.</p>
    </div>
  </li>
  <li class="list_item list_item-box list_item-collapsible">
    <div class="list_item-collapsible_head js-toggle" data-target="parent">
      <div class="list_item_section-primary">
        <h4 class="text-nospace text-regular">Lorem ipsum</h4>
      </div>
      <div class="list_item_section-action list_item_section-va-top">
        <button class="btn btn-link-2 no-pad-right" type="button"><i class="icon icon-m">chevrondown</i></button>
      </div>
    </div>
    <div class="list_item-collapsible_content">
      <p class="text-nospace">Lorem ipsum Enim eu eu deserunt anim dolore laboris officia est cillum dolor Ut Duis cupidatat pariatur pariatur do ut magna Excepteur non sint enim ex reprehenderit aliquip ex dolore deserunt cupidatat.</p>
    </div>
  </li>
</ul>

Prototypes

There are some prototypes from page here.

Example:code
Code:
<ul class="list">
  <li class="list_item">
    <div class="list_item_section-primary">
      <h4 class="text-nospace text-regular">
         Tradičná thajská masáž
         <span class="separator-v"></span>
         60 min.
      </h4>
    </div>
    <div class="list_item_section-secondary">
      <ul class="list_item_subsections">
        <li class="list_item_subsection">
          <p class="h3 text-nospace text-regular ">42 <sup>€</sup></p>
        </li>
        <li class="list_item_subsection">
          <p class="h3 text-nospace text-regular  text-color-grey-300">
            <del>50 <sup>€</sup></del>
          </p>
        </li>
        <li class="list_item_subsection">
          <a class="btn">KÚPIŤ</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="list_item">
    <div class="list_item_section-primary">
      <h4 class="text-nospace text-regular">
         Tradičná thajská masáž
         <span class="separator-v"></span>
         60 min.
      </h4>
    </div>
    <div class="list_item_section-secondary">
      <ul class="list_item_subsections">
        <li class="list_item_subsection">
          <p class="h3 text-nospace text-regular ">42 <sup>€</sup></p>
        </li>
        <li class="list_item_subsection">
          <p class="h3 text-nospace text-regular  text-color-grey-300">
            <del>50 <sup>€</sup></del>
          </p>
        </li>
        <li class="list_item_subsection">
          <a class="btn">KÚPIŤ</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="list_item">
    <div class="list_item_section-primary">
      <a class="link">
         Zobraziť všetky ponuky
         <i class="icon text-space-fix">chevronright</i>
      </a>
    </div>
  </li>
</ul>