angular-material-npfixed/src/components/card/demoInCardActions/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="AppCtrl" ng-cloak>
  <md-content class="md-padding" layout-xs="column" layout="row">
    <div flex-xs flex-gt-xs="50" layout="column">
      <md-card>
        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">In-card mixed actions</span>
          </md-card-title-text>
        </md-card-title>
        <md-card-actions layout="row" layout-align="start center">
          <md-card-icon-actions>
            <md-button class="md-icon-button" aria-label="Favorite">
              <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button" aria-label="Share">
              <md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
            </md-button>
          </md-card-icon-actions>
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
        <md-card-content>
          <p>
            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
          </p>
        </md-card-content>
      </md-card>
      <md-card>
        <md-card-header>
          <md-card-avatar>
            <img class="md-user-avatar" src="img/100-2.jpeg"/>
          </md-card-avatar>
          <md-card-header-text>
            <span class="md-title">User</span>
            <span class="md-subhead">subhead</span>
          </md-card-header-text>
        </md-card-header>
        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">In-card mixed actions</span>
            <span class="md-subhead">Reversed</span>
          </md-card-title-text>
        </md-card-title>
        <md-card-actions layout="row" layout-align="start center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
          <md-card-icon-actions>
            <md-button class="md-icon-button" aria-label="toggle">
              <md-icon md-svg-icon="md-toggle-arrow"></md-icon>
            </md-button>
          </md-card-icon-actions>
        </md-card-actions>
        <md-card-content>
          <p>
            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
          </p>
        </md-card-content>
      </md-card>
    </div>
    <div flex-xs flex-gt-xs="50" layout="column">
      <md-card>
        <md-card-header>
          <md-card-avatar>
            <md-icon class="md-avatar-icon" md-svg-icon="img/icons/menu.svg"></md-icon>
          </md-card-avatar>
          <md-card-header-text>
            <span class="md-title">Title</span>
            <span class="md-subhead">subhead</span>
          </md-card-header-text>
        </md-card-header>
        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">In-card actions</span>
            <span class="md-subhead">Description</span>
          </md-card-title-text>
        </md-card-title>
        <md-card-actions layout="row" layout-align="start center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
        <md-card-content>
          <p>
            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
          </p>
        </md-card-content>
      </md-card>
    </div>
  </md-content>
</div>