angular-material-npfixed/src/components/card/demoCardActionButtons/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">Action buttons</span>
          </md-card-title-text>
        </md-card-title>
        <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>
          <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>
          <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-actions layout="row" layout-align="end center">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
      <md-card>
        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Vertical action buttons</span>
          </md-card-title-text>
        </md-card-title>
        <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-actions layout="column" layout-align="start">
          <md-button>Action 1</md-button>
          <md-button>Action 2</md-button>
        </md-card-actions>
      </md-card>
    </div>
    <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">Icon action buttons</span>
          </md-card-title-text>
        </md-card-title>
        <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-actions layout="row" layout-align="end center">
          <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="Settings">
            <md-icon md-svg-icon="img/icons/menu.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-actions>
      </md-card>
      <md-card>
        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
        <md-card-actions layout="row" layout-align="end center">
          <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="Settings">
            <md-icon md-svg-icon="img/icons/menu.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-actions>
      </md-card>

      <md-card>
        <md-card-header>
          <md-card-avatar>
            <img src="img/logo.svg"/>
          </md-card-avatar>
          <md-card-header-text>
            <span class="md-title">Angular</span>
            <span class="md-subhead">Material</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">Card header</span>
          </md-card-title-text>
        </md-card-title>
        <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>