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 The bot does some handling of markdown. Please file a bug if it does the wrong | |
11 thing! https://github.com/PolymerLabs/tedium/issues | |
12 | |
13 --> | |
14 | |
15 [](https://travis-ci.org/PolymerElements/paper-card) | |
16 | |
17 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-card)_ | |
18 | |
19 | |
20 ##<paper-card> | |
21 | |
22 Material design: [Cards](https://www.google.com/design/spec/components/cards.htm
l) | |
23 | |
24 `paper-card` is a container with a drop shadow. | |
25 | |
26 Example: | |
27 | |
28 ```html | |
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> | |
33 </div> | |
34 </paper-card> | |
35 ``` | |
36 | |
37 Example - top card image: | |
38 | |
39 ```html | |
40 <paper-card heading="Card Title" image="/path/to/image.png"> | |
41 ... | |
42 </paper-card> | |
43 ``` | |
44 | |
45 ### Accessibility | |
46 | |
47 By default, the `aria-label` will be set to the value of the `heading` attribute
. | |
48 | |
49 ### Styling | |
50 | |
51 The following custom properties and mixins are available for styling: | |
52 | |
53 | Custom property | Description | Default | | |
54 | --- | --- | --- | | |
55 | `--paper-card-background-color` | The background color of the card | `--primar
y-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 sec
tion | `{}` | | |
59 | `--paper-card-header-image` | Mixin applied to the image in the card header se
ction | `{}` | | |
60 | `--paper-card-header-image-text` | Mixin applied to the text overlapping the i
mage 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 | `{}` | | |
64 | |
65 | |
OLD | NEW |