
<div ng-controller="AppCtrl">
  <md-content>
    <md-list>
      <md-subheader class="md-no-sticky">3 line item</md-subheader>
      <md-list-item class="md-3-line" ng-repeat="item in todos">
        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
        <div class="md-list-item-text" layout="column">
          <h3>{{ item.who }}</h3>
          <h4>{{ item.what }}</h4>
          <p>{{ item.notes }}</p>
        </div>
      </md-list-item>
      <md-divider ></md-divider>
      <md-subheader class="md-no-sticky">2 line item</md-subheader>
      <md-list-item class="md-2-line">
      <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
        <div class="md-list-item-text">
          <h3>{{ todos[0].who }}</h3>
          <p>Secondary text</p>
        </div>
      </md-list-item>
      <md-divider ></md-divider>
      <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
      <md-list-item class="md-3-line">
        <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
        <div class="md-list-item-text">
          <h3>{{ todos[0].who }}</h3>
          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.</p>
        </div>
      </md-list-item>
      <md-divider ></md-divider>
      <md-subheader class="md-no-sticky">md-offset class</md-subheader>
      <md-list-item class="md-2-line" ng-repeat="phone in phones">
        <md-icon md-svg-icon="communication:phone" ng-if="$index === 0"></md-icon>
        <div class="md-list-item-text" ng-class="{'md-offset': $index != 0 }">
          <h3> {{ phone.number }} </h3>
          <p> {{ phone.type }} </p>
        </div>
      </md-list-item>
    </md-list>
  </md-content>
</div>
