OLD | NEW |
(Empty) | |
| 1 |
| 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) |
| 21 |
| 22 `paper-card` is a container with a drop shadow. |
| 23 |
| 24 Example: |
| 25 |
| 26 <paper-card heading="Card Title"> |
| 27 <div class="card-content">Some content</div> |
| 28 <div class="card-actions"> |
| 29 <paper-button>Some action</paper-button> |
| 30 </div> |
| 31 </paper-card> |
| 32 |
| 33 Example - top card image: |
| 34 |
| 35 <paper-card heading="Card Title" image="/path/to/image.png"> |
| 36 ... |
| 37 </paper-card> |
| 38 |
| 39 ### Accessibility |
| 40 |
| 41 By default, the `aria-label` will be set to the value of the `heading` attribute
. |
| 42 |
| 43 ### Styling |
| 44 |
| 45 The following custom properties and mixins are available for styling: |
| 46 |
| 47 Custom property | Description | Default |
| 48 ----------------|-------------|---------- |
| 49 `--paper-card-header-color` | The color of the header text | `#000` |
| 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 | `{}` |
| 54 `--paper-card-content` | Mixin applied to the card content section| `{}` |
| 55 `--paper-card-actions` | Mixin applied to the card action section | `{}` |
| 56 `--paper-card` | Mixin applied to the card | `{}` |
| 57 |
| 58 |
OLD | NEW |