第3回目は paper-card です。
What is paper-card
paper-cardとは見たまんまですが、紙のカードを模したデザインで、
画像やテキストなど異なる要素をまとまったものとして見せることができます。
見たほうが早いと思うので早速サンプルにいきましょう。
Example
サンプルコード
index.html
<!DOCTYPE html>
<html>
<head>
<title>paper-card Sample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<style is="custom-style">
.container {
padding: 10px;
margin: 0;
}
.container > div {
padding: 15px;
margin: 5px;
background-color: white;
min-height: 20px;
}
.vertical-section-container {
max-width: 400px;
margin: 0 auto;
}
paper-card.rate { @apply(--layout-horizontal); }
.card-actions { padding: 3px 16px; }
.rate-image {
width: 100px;
height: 170px;
background: url('http://placehold.it/100x170/3f51b5/ffffff');
background-size: cover;
}
.rate-content {
@apply(--layout-flex);
float: left;
}
.rate-header { @apply(--paper-font-headline); }
.rate-name { color: var(--paper-grey-600); margin: 10px 0; }
paper-icon-button.rate-icon {
--iron-icon-fill-color: white;
--iron-icon-stroke-color: var(--paper-grey-600);
}
</style>
</head>
<body>
<div class="vertical-section-container">
<div class="container">
<paper-card heading="Card" image="http://placehold.it/380x100/FFC107/000000">
<div class="card-content">
A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.
</div>
<div class="card-actions">
<paper-icon-button icon="favorite"></paper-icon-button>
</div>
</paper-card>
</div>
<div class="container">
<paper-card class="rate">
<div class="rate-content">
<div class="card-content">
<div class="rate-header">paper-card</div>
<div class="rate-name">Card</div>
<div>Material design</div>
</div>
<div class="card-actions">
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
</div>
</div>
<div class="rate-image"></div>
</paper-card>
</div>
</div>
</body>
</html>
サンプル結果
リストなんかで使うとなかなかかっこよさそうですね。
（実際、デザインガイドで使ってたものがかっこ良かったです）
なんでも内容できると思いますが、ガイドライン見ながら適切な場所で使っていかないとですね。