Today's polymer element [paper-card]


第3回目は **paper-card** です。

## What is paper-card

paper-cardとは見たまんまですが、紙のカードを模したデザインで、
画像やテキストなど異なる要素をまとまったものとして見せることができます。
見たほうが早いと思うので早速サンプルにいきましょう。

## Example

### サンプルコード
```html: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>

```

### サンプル結果
![スクリーンショット 2016-02-12 午後8.11.22.png](https://qiita-image-store.s3.amazonaws.com/0/112299/34d3c0f5-45cd-517d-5f4d-bfb2b8a8c798.png "スクリーンショット 2016-02-12 午後8.11.22.png")

リストなんかで使うとなかなかかっこよさそうですね。
（実際、[デザインガイド](https://www.google.com/design/spec/components/cards.html)で使ってたものがかっこ良かったです）
なんでも内容できると思いますが、ガイドライン見ながら適切な場所で使っていかないとですね。