angular-material-npfixed/src/components/subheader/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="SubheaderAppCtrl" layout="column" flex layout-fill ng-cloak>

  <md-toolbar md-scroll-shrink>
    <div class="md-toolbar-tools">My Messages</div>
  </md-toolbar>

  <md-content style="height: 600px;" md-theme="altTheme">

    <section>
      <md-subheader class="md-primary">Unread Messages</md-subheader>
      <md-list layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
        </md-list-item>
      </md-list>
    </section>

    <section>
      <md-subheader class="md-warn">Late Messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>

    <section>
      <md-subheader>Read Messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>

    <section>
      <md-subheader class="md-accent">Archived messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>

  </md-content>
</div>