Angualr Material の 1.0 が出たらしいので、その中の Card を試してみました。
カードを表示する
依存関係が多いです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script>angular.module('app', ['ngMaterial']);</script>
</head>
<body ng-app="app">
<md-card>
<md-card-content>
Sit saepe amet incidunt obcaecati nostrum veritatis. Impedit quam natus quasi sequi consectetur accusantium iusto magni. Quam necessitatibus numquam aliquid cum maxime. Provident saepe aliquam tempora vel id. Dolores explicabo?
</md-card-content>
</md-card>
</body>
</html><md-card> と <md-card-content> がカードの要素です。これだど素のカードが表示されます。
関係ないですが中身の文章は Emmet の Lorem Ipsum generator で生成しました。こういう時サラッとサンプルデータが作れて便利です。
タイトルを表示する
カードにタイトルを追加するには <md-card-title> 要素を使います。
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Cat</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
Sit saepe amet incidunt obcaecati nostrum veritatis. Impedit quam natus quasi sequi consectetur accusantium iusto magni. Quam necessitatibus numquam aliquid cum maxime. Provident saepe aliquam tempora vel id. Dolores explicabo?
</md-card-content>
</md-card>アイコンを表示する
タイトル横にアイコンを表示するには <md-card-title-media> 要素を使います。
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Cat</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm">
<img src="http://lorempixel.com/300/300/cats/1/">
</div>
</md-card-title-media>
</md-card-title>
<md-card-content>
Sit saepe amet incidunt obcaecati nostrum veritatis. Impedit quam natus quasi sequi consectetur accusantium iusto magni. Quam necessitatibus numquam aliquid cum maxime. Provident saepe aliquam tempora vel id. Dolores explicabo?
</md-card-content>
</md-card>md-media-sm クラスを md-media-lg なんかに変えれば画像のサイズを大きくしたり変更できます。
画像をカード上部に表示する
タイトル横ではなくカード上部全体に画像表示するには <md-card> 直下に md-card-image クラスをつけた <img> を置けばいいみたいです。
<md-card>
<img src="http://lorempixel.com/300/200/cats/1/" class="md-card-image">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Cat</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
Sit saepe amet incidunt obcaecati nostrum veritatis. Impedit quam natus quasi sequi consectetur accusantium iusto magni. Quam necessitatibus numquam aliquid cum maxime. Provident saepe aliquam tempora vel id. Dolores explicabo?
</md-card-content>
</md-card>ボタンを配置する
カードの下部にボタンを表示するには <md-card-actions> 要素を使うみたいです。
<md-card>
<md-card-content>
Sit saepe amet incidunt obcaecati nostrum veritatis. Impedit quam natus quasi sequi consectetur accusantium iusto magni. Quam necessitatibus numquam aliquid cum maxime. Provident saepe aliquam tempora vel id. Dolores explicabo?
</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>