OLD | NEW |
1 # paper-card | |
2 | 1 |
3 Material Design: <a href="http://www.google.com/design/spec/components/cards.htm
l">Cards</a> | 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-card.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-card) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-card)_ |
| 15 |
| 16 |
| 17 ##<paper-card> |
| 18 |
| 19 |
| 20 Material design: [Cards](https://www.google.com/design/spec/components/cards.htm
l) |
4 | 21 |
5 `paper-card` is a container with a drop shadow. | 22 `paper-card` is a container with a drop shadow. |
6 | 23 |
7 Example: | 24 Example: |
8 ```html | 25 |
9 <paper-card heading="Card Title"> | 26 <paper-card heading="Card Title"> |
10 <div class="card-content">Some content</div> | 27 <div class="card-content">Some content</div> |
11 <div class="card-actions"> | 28 <div class="card-actions"> |
12 <paper-button>Some action</paper-button> | 29 <paper-button>Some action</paper-button> |
13 </div> | 30 </div> |
14 </paper-card> | 31 </paper-card> |
15 ``` | 32 |
| 33 Example - top card image: |
| 34 |
| 35 <paper-card heading="Card Title" image="/path/to/image.png"> |
| 36 ... |
| 37 </paper-card> |
16 | 38 |
17 ### Accessibility | 39 ### Accessibility |
| 40 |
18 By default, the `aria-label` will be set to the value of the `heading` attribute
. | 41 By default, the `aria-label` will be set to the value of the `heading` attribute
. |
19 | 42 |
20 ### Styling | 43 ### Styling |
21 | 44 |
22 The following custom properties and mixins are available for styling: | 45 The following custom properties and mixins are available for styling: |
23 | 46 |
24 Custom property | Description | Default | 47 Custom property | Description | Default |
25 ----------------|-------------|---------- | 48 ----------------|-------------|---------- |
26 `--paper-card-header-color` | The color of the header text | `#000` | 49 `--paper-card-header-color` | The color of the header text | `#000` |
27 `--paper-card-header` | Mixin applied to the card header section | `{}` | 50 `--paper-card-header` | Mixin applied to the card header section | `{}` |
| 51 `--paper-card-header-text` | Mixin applied to the title in the card header secti
on | `{}` |
| 52 `--paper-card-header-image` | Mixin applied to the image in the card header sect
ion | `{}` |
| 53 `--paper-card-header-image-text` | Mixin applied to the text overlapping the ima
ge in the card header section | `{}` |
28 `--paper-card-content` | Mixin applied to the card content section| `{}` | 54 `--paper-card-content` | Mixin applied to the card content section| `{}` |
29 `--paper-card-actions` | Mixin applied to the card action section | `{}` | 55 `--paper-card-actions` | Mixin applied to the card action section | `{}` |
30 `--paper-card` | Mixin applied to the card | `{}` | 56 `--paper-card` | Mixin applied to the card | `{}` |
| 57 |
| 58 |
OLD | NEW |