material-design-lite/src/list/snippets/two-line.html

Material Design Components in CSS, JS and HTML

<!-- Two Line List with secondary info and action -->
<div class="mdl-cell mdl-cell--6-col">
  <h4> Two Line List with Secondary Info and Action </h4>
  <ul class="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-icon">person</i>
        <span class=mdl-list__item-text>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-icon">person</i>
        <span class=mdl-list__item-text>Aaron Paul</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-icon">person</i>
        <span class=mdl-list__item-text>Bob Odenkirk</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>
  </ul>
</div>