<h4>Lists</h4>

<h5>Simple List</h5>

<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Bryan Cranston
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Aaron Paul
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Bob Odenkirk
    </mdl-list-item-primary-content>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Bryan Cranston
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Aaron Paul
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      Bob Odenkirk
    </mdl-list-item-primary-content>
  </mdl-list-item>
</mdl-list>
]]>
</pre>

<h5>Icons</h5>

<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Bryan Cranston
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Aaron Paul
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Bob Odenkirk
    </mdl-list-item-primary-content>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Bryan Cranston
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Aaron Paul
    </mdl-list-item-primary-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-icon>person</mdl-icon>
      Bob Odenkirk
    </mdl-list-item-primary-content>
  </mdl-list-item>
</mdl-list>
]]>
</pre>

<h5>Avatars and actions</h5>

<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
    </mdl-list-item-primary-content>
    <a href="#"><mdl-icon>star</mdl-icon></a>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
    </mdl-list-item-primary-content>
    <a href="#"><mdl-icon>star</mdl-icon></a>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
    </mdl-list-item-primary-content>
    <a href="#"><mdl-icon>star</mdl-icon></a>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
    </mdl-list-item-primary-content>
    <a href="#"><mdl-icon>star</mdl-icon></a>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>
  ]]>
</pre>

<h5>Avatars and controls</h5>

<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Bryan Cranston
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-action>
      <mdl-checkbox mdl-ripple></mdl-checkbox>
    </mdl-list-item-secondary-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Aaron Paul
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-action>
      <mdl-radio ngModel="false" mdl-ripple></mdl-radio>
    </mdl-list-item-secondary-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Bob Odenkirk
    </mdl-list-item-primary-content>
      <mdl-list-item-secondary-action>
        <mdl-switch mdl-ripple></mdl-switch>
      </mdl-list-item-secondary-action>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
  <style>
    mdl-radio, mdl-checkbox, mdl-switch {
      display: inline;
    }
  </style>
<mdl-list>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Bryan Cranston
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-action>
      <mdl-checkbox mdl-ripple></mdl-checkbox>
    </mdl-list-item-secondary-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Aaron Paul
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-action>
      <mdl-radio ngModel="false" mdl-ripple></mdl-radio>
    </mdl-list-item-secondary-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      Bob Odenkirk
    </mdl-list-item-primary-content>
      <mdl-list-item-secondary-action>
        <mdl-switch mdl-ripple></mdl-switch>
      </mdl-list-item-secondary-action>
  </mdl-list-item>
</mdl-list>
  ]]>
</pre>

<h5>Two line</h5>

<mdl-list>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <mdl-list-item-secondary-info>Actor</mdl-list-item-secondary-info>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
<mdl-list>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <mdl-list-item-secondary-info>Actor</mdl-list-item-secondary-info>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="2">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
      <mdl-list-item-sub-title>62 Episodes</mdl-list-item-sub-title>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>
  ]]>
</pre>

<h5>Three line</h5>

<mdl-list style="width:650px">
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
      <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.
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
      <mdl-list-item-text-body>
        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
        the "Need For Speed" Movie.
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
      <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".
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>

<pre prism>
  <![CDATA[
<mdl-list style="width:650px">
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bryan Cranston</span>
      <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.
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Aaron Paul</span>
      <mdl-list-item-text-body>
        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
        the "Need For Speed" Movie.
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
  <mdl-list-item lines="3">
    <mdl-list-item-primary-content>
      <mdl-icon mdl-list-item-avatar>person</mdl-icon>
      <span>Bob Odenkirk</span>
      <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".
      </mdl-list-item-text-body>
    </mdl-list-item-primary-content>
    <mdl-list-item-secondary-content>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-secondary-content>
  </mdl-list-item>
</mdl-list>
     ]]>
</pre>


<h5> List components</h5>

<table class="docu" mdl-shadow="2">
   <thead>
   <tr>
      <th>Component</th>
      <th>Description</th>
   </tr>
   </thead>
   <tbody>

   <tr>
      <td>mdl-list</td>
      <td>
         Basic container for any <i>mdl-list</i> component.
      </td>
   </tr>

   <tr>
      <td>mdl-list-item</td>
      <td>
         Defines a item in the list. The attribute <i>lines</i> will be used to specify of how many individual lines a list item consist.
         You can use <i>1</i>, <i>2</i> and <i>3</i>. <i>1</i> is the default value.
      </td>
   </tr>

   <tr>
      <td>mdl-list-item-primary-content</td>
      <td>
         Defines the primary content sub-division.
      </td>
   </tr>

   <tr>
     <td>mdl-list-item-secondary-action</td>
     <td>
       Defines the Action sub-division. Needs a 2 or 3 line list-item.
     </td>
   </tr>

   <tr>
      <td>mdl-list-item-secondary-content</td>
      <td>
         Defines the secondary content sub-division. Needs a 2 or 3 line list-item.
      </td>
   </tr>

   <tr>
      <td>mdl-list-item-secondary-info</td>
      <td>
         Defines the information sub-division. Needs a 2 or 3 line list-item.
      </td>
   </tr>

   <tr>
     <td>mdl-list-item-sub-title</td>
     <td>
       Defines the sub title in the <i>mdl-list-item-primary-content</i> component.
     </td>
   </tr>

   <tr>
      <td>mdl-list-item-text-body</td>
      <td>
         Defines the text-section in the <i>mdl-list-item-primary-content</i> component.
      </td>
   </tr>

   </tbody>
</table>

<h5>Additional attributes for mdl-icon</h5>

<p>These attributes can be used to style <i>mdl-icons</i> in lists</p>

<table class="docu" mdl-shadow="2">
   <thead>
   <tr>
      <th>Attribute</th>
      <th>Description</th>
   </tr>
   </thead>
   <tbody>


   <tr>
     <td>mdl-list-item-avatar></td>
     <td>
       avatar icon.
     </td>
   </tr>

   <tr>
      <td>mdl-list-item-icon</td>
      <td>
         Small icon.
      </td>
   </tr>

   <tr>
      <td>mdl-ripple</td>
      <td>Add <i>mdl-ripple</i> to the <i>mdl-list-item</i> component to create a ripple effect.</td>
   </tr>

   </tbody>
</table>
