4
This README is automatically generated from the comments in these files:
7
Edit those files, and our readme bot will duplicate them over here!
8
Edit this file, and the bot will squash your changes :)
10
The bot does some handling of markdown. Please file a bug if it does the wrong
11
thing! https://github.com/PolymerLabs/tedium/issues
15
[![Build Status](https://travis-ci.org/PolymerElements/paper-card.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-card)
17
_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-card)_
22
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
24
`paper-card` is a container with a drop shadow.
29
<paper-card heading="Card Title">
30
<div class="card-content">Some content</div>
31
<div class="card-actions">
32
<paper-button>Some action</paper-button>
37
Example - top card image:
40
<paper-card heading="Card Title" image="/path/to/image.png">
47
By default, the `aria-label` will be set to the value of the `heading` attribute.
51
The following custom properties and mixins are available for styling:
53
| Custom property | Description | Default |
55
| `--paper-card-background-color` | The background color of the card | `--primary-background-color` |
56
| `--paper-card-header-color` | The color of the header text | `#000` |
57
| `--paper-card-header` | Mixin applied to the card header section | `{}` |
58
| `--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` |
59
| `--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` |
60
| `--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` |
61
| `--paper-card-content` | Mixin applied to the card content section | `{}` |
62
| `--paper-card-actions` | Mixin applied to the card action section | `{}` |
63
| `--paper-card` | Mixin applied to the card | `{}` |