android13/external/chromium-trace/catapult/third_party/polymer/components/paper-card
liiir1985 7f62dcda9f initial 2024-06-22 20:45:49 +08:00
..
demo initial 2024-06-22 20:45:49 +08:00
test initial 2024-06-22 20:45:49 +08:00
.travis.yml initial 2024-06-22 20:45:49 +08:00
CONTRIBUTING.md initial 2024-06-22 20:45:49 +08:00
README.md initial 2024-06-22 20:45:49 +08:00
bower.json initial 2024-06-22 20:45:49 +08:00
index.html initial 2024-06-22 20:45:49 +08:00
paper-card.html initial 2024-06-22 20:45:49 +08:00

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-background-color The background color of the card --primary-background-color
--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 {}