c5169e0e
Renato De Donato
a new hope
|
1
|
# paper-card
|
73bcce88
luigser
COMPONENTS
|
2
|
|
c5169e0e
Renato De Donato
a new hope
|
3
|
Material Design: <a href="http://www.google.com/design/spec/components/cards.html">Cards</a>
|
73bcce88
luigser
COMPONENTS
|
4
5
6
7
|
`paper-card` is a container with a drop shadow.
Example:
|
73bcce88
luigser
COMPONENTS
|
8
9
10
11
12
13
14
15
16
|
```html
<paper-card heading="Card Title">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
```
|
73bcce88
luigser
COMPONENTS
|
17
|
### Accessibility
|
73bcce88
luigser
COMPONENTS
|
18
19
20
21
22
23
|
By default, the `aria-label` will be set to the value of the `heading` attribute.
### Styling
The following custom properties and mixins are available for styling:
|
c5169e0e
Renato De Donato
a new hope
|
24
25
26
27
28
29
30
|
Custom property | Description | Default
----------------|-------------|----------
`--paper-card-header-color` | The color of the header text | `#000`
`--paper-card-header` | Mixin applied to the card header section | `{}`
`--paper-card-content` | Mixin applied to the card content section| `{}`
`--paper-card-actions` | Mixin applied to the card action section | `{}`
`--paper-card` | Mixin applied to the card | `{}`
|