List

The list elements can consists of a few elements. However the text area makes the biggest difference.

The list elements has three different styles that you can use. The styles that you can use are: single line, two line and three line. The way the component is made means that you can use the three styles by each other.

Structure

The list item can consists out of the following elements: support, content and control. The list also has a few modifiers which are described below.

Single line

For the the list you need an element with the class .list. Now you can specify the type of line for each child element. For the single line this would mean class .list--single-line

The content of a list item needs the class .list__content.

If you would like to add a support icon or image you also need to give the list item the class .list--support. For the larger support image you need to use class .list--support--large instead. The image/ icon it self need to get the class list__support__icon

For a control element like the "more vertical" in the examples you need to use the class .list__control on the control element.

Single line item
Single line item
Singe line item
Singe line item
Singe line item
Singe line item

    
<ul class="list">
    <li class="list--single-line">
        <span class="list__content">Single line item</span>
    </li>
    <li class="list--single-line">
        <span class="list__content">Single line item</span>
        <i class="material-icons icon list__control">person</i>
    </li>
    <li class="list--single-line list--support">
        <i class="material-icons icon list__support__icon">person</i>
        <span class="list__content">Singe line item</span>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--single-line list--support">
        <div class="list__support__image">
            <img src="//i.pravatar.cc/40">
        </div>
        <span class="list__content">Singe line item</span>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--single-line list--support--large">
        <div class="list__support__image">
            <img src="//via.placeholder.com/56x56">
        </div>
        <span class="list__content">Singe line item</span>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--single-line list--support--large">
        <div class="list__support__image--large">
            <img src="//placeimg.com/100/56/nature">
        </div>
        <span class="list__content">Singe line item</span>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
</ul>

Two line

For the two line list items you need to use the class .list--two-line. The content of the list item changes a bit as well. You can now add two extra elements. These elements are .list__content__title and .list__content__text.

Two line item Secondary text
Overline Secondary text
Two line item Secondary text
Two line item Secondary text
Two line item Secondary text
Two line item Secondary text

    
<ul class="list">
    <li class="list--two-line">
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text</span>
        </div>
    </li>
    <li class="list--two-line">
        <div class="list__content">
            <span class="overline">Overline</span>
            <span class="list__content__title">Secondary text</span>
        </div>
    </li>
    <li class="list--two-line list--support">
        <i class="material-icons icon list__support__icon">person</i>
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--two-line list--support">
        <div class="list__support__image">
            <img src="//i.pravatar.cc/40">
        </div>
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--two-line list--support">
        <div class="list__support__image">
            <img src="//i.pravatar.cc/40" class="shape--circle">
        </div>
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--two-line list--support">
        <div class="list__support__image--large">
            <img src="//placeimg.com/100/56/nature">
        </div>
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
</ul>

Three line

The three line is exactly the same as the two-line except the list item now needs class .list--three-line.

Three line item Secondary text Lorem ipsum dolor sit
amet, consectetu adipiscing elit.
Overline Three line item Secondary text Lorem ipsum dolor sit amet.
Three line item Secondary text Lorem ipsum dolor sit
amet, consectetu adipiscing elit.
Three line item Secondary text Lorem ipsum dolor sit
amet, consectetu.
Three line item Secondary text Lorem ipsum dolor sit
amet, consectetu.
Two line item Secondary text Lorem ipsum dolor sit
amet, consectetu.

    
<ul class="list">
    <li class="list--three-line">
        <div class="list__content">
            <span class="list__content__title">Three line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit<br>amet, consectetu adipiscing elit.</span>
        </div>
    </li>
    <li class="list--three-line">
        <div class="list__content">
            <span class="overline">Overline</span>
            <span class="list__content__title">Three line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit amet.</span>
        </div>
    </li>
    <li class="list--three-line list--support">
        <i class="material-icons icon list__support__icon">person</i>
        <div class="list__content">
            <span class="list__content__title">Three line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit<br>amet, consectetu adipiscing elit.</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--three-line list--support">
        <div class="list__support__image">
            <img src="//i.pravatar.cc/40">
        </div>
        <div class="list__content">
            <span class="list__content__title">Three line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit<br>amet, consectetu.</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--three-line list--support">
        <div class="list__support__image">
            <img src="//i.pravatar.cc/40" class="shape--circle">
        </div>
        <div class="list__content">
            <span class="list__content__title">Three line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit<br>amet, consectetu.</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
    <li class="list--three-line list--support">
        <div class="list__support__image--large">
            <img src="//placeimg.com/100/56/nature">
        </div>
        <div class="list__content">
            <span class="list__content__title">Two line item</span>
            <span class="list__content__text">Secondary text Lorem ipsum dolor sit<br>amet, consectetu.</span>
        </div>
        <i class="material-icons icon list__control">more_vert</i>
    </li>
</ul>