Name Last Update
..
demo Loading commit data...
test Loading commit data...
.bower.json Loading commit data...
.gitignore Loading commit data...
.travis.yml Loading commit data...
CONTRIBUTING.md Loading commit data...
README.md Loading commit data...
bower.json Loading commit data...
index.html Loading commit data...
paper-card.html Loading commit data...

README.md

Build Status

Demo and API Docs

##<paper-card>

Material design: Cards

paper-card is a container with a drop shadow.

Example:

<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>

Example - top card image:

<paper-card heading="Card Title" image="/path/to/image.png">
  ...
</paper-card>

Accessibility

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:

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-header-text Mixin applied to the title in the card header section {}
--paper-card-header-image Mixin applied to the image in the card header section {}
--paper-card-header-image-text Mixin applied to the text overlapping the image in 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 {}