ClickWebExpress
ClickWebExpress

MDL Lists

Lists present multiple line items vertically as a single continuous element.

  • Bryan Cranston
  • Aaron Paul
  • Bob Odenkirk
Simple list
<!-- Simple list -->
<style>
.demo-list-item {
  width: 300px;
}
</style>

<ul class="demo-list-item mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Bryan Cranston
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Aaron Paul
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Bob Odenkirk
    </span>
  </li>
</ul>
  • person Bryan Cranston
  • person Aaron Paul
  • person Bob Odenkirk
Icons
<!-- Icon List -->
<style>
.demo-list-icon {
  width: 300px;
}
</style>

<ul class="demo-list-icon mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">person</i>
    Bryan Cranston
</span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">person</i>
    Aaron Paul
  </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">person</i>
    Bob Odenkirk
  </span>
  </li>
</ul>
person Bryan Cranston star
person Aaron Paul star
person Bob Odenkirk star
Avatars and actions
<!-- List items with avatar and action -->
<style>
.demo-list-action {
  width: 300px;
}
</style>

<div class="demo-list-action mdl-list">
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
    </span>
    <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </div>
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Aaron Paul</span>
    </span>
    <a class="mdl-list__item-secondary-action" href="#"&ggt;<i class="material-icons">star</i></a>
  </div>
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bob Odenkirk</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </span>
  </div>
</div>
  • person Bryan Cranston
  • person Aaron Paul
  • person Bob Odenkirk
Avatars and controls
<!-- List with avatar and controls -->
<style>
.demo-list-control {
  width: 300px;
}

.demo-list-radio {
  display: inline;
}
</style>

<ul class="demo-list-control mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Bryan Cranston
    </span>
    <span class="mdl-list__item-secondary-action">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
        <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
      </label>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Aaron Paul
    </span>
      <span class="mdl-list__item-secondary-action">
        <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
          <input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
        </label>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Bob Odenkirk
    </span>
      <span class="mdl-list__item-secondary-action">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
          <input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
        </label>
    </span>
  </li>
</ul>
  • person Bryan Cranston 62 Episodes Actor star
  • person Aaron Paul 62 Episodes star
  • person Bob Odenkirk 62 Episodes star
Two line
<!-- Two Line List with secondary info and action -->
<style>
.demo-list-two {
  width: 300px;
}
</style>

<ul class="demo-list-two mdl-list">
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <span class="mdl-list__item-secondary-info">Actor</span>
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Aaron Paul</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bob Odenkirk</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>
  • person Bryan Cranston Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. star
  • person Aaron Paul Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie. star
  • person Bob Odenkirk Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul". star
Three line
<!-- Three Line List with secondary info and action -->
<style>
.demo-list-three {
  width: 650px;
}
</style>

<ul class="demo-list-three mdl-list">
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-text-body">
        Bryan Cranston played the role of Walter in Breaking Bad. He is also known
        for playing Hal in Malcom in the Middle.
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      <span>Aaron Paul</span>
      <span class="mdl-list__item-text-body">
        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
        the "Need For Speed" Movie.
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      <span>Bob Odenkirk</span>
      <span class="mdl-list__item-text-body">
        Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
        character, Bob stars in his own show now, called "Better Call Saul".
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Instructions

 1. Code a <ul> element with the class mdl-list; this is the "outer" container, intended to hold all of the list's content.

<ul class='mdl-list'>
</ul>

 2. Code as many <li> elements as required with the class mdl-list__item; this is intended to hold all of the item's content.

<ul class='mdl-list'>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
</ul>

 3. Add your content as the children of the <li>, with the appropriate content type modification class for example .

<ul class='mdl-list'>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
</ul>

CSS classes

The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.

MDL Class Effect Remark
.mdl-list Defines list as an MDL component -
.mdl-list__item Defines the List's Items required
.mdl-list__item--two-line Defines the List's Items as Two Line Optional Two Line List Variant
.mdl-list__item--three-line Defines the List's Items as a Three Line Optional Three Line List Variant
.mdl-list__item-primary-content Defines the primary content sub-division -
.mdl-list__item-avatar Defines the avatar sub-division -
.mdl-list__item-icon Defines the icon sub-division -
.mdl-list__item-secondary-content Defines the secondary content sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-secondary-info Defines the information sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-secondary-action Defines the Action sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-text-body Defines the Text Body sub-division requires .mdl-list__item-three-line