paper-card.html 5.09 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

Material design: [Cards](

`paper-card` is a container with a drop shadow.


    <paper-card heading="Card Title">
      <div class="card-content">Some content</div>
      <div class="card-actions">
        <paper-button>Some action</paper-button>

Example - top card image:

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

### 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 | `{}`

@group Paper Elements
@element paper-card
@demo demo/index.html

<dom-module id="paper-card">
    <style include="paper-material">
      :host {
        display: inline-block;
        position: relative;
        box-sizing: border-box;

        background: #fff;
        border-radius: 2px;

      /* IE 10 support for HTML5 hidden attr */
      [hidden] {
        display: none !important;

      .header {
        position: relative;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        overflow: hidden;

      .header img {
        width: 100%;
        pointer-events: none;

      .header .title-text {
        padding: 16px;
        font-size: 24px;
        font-weight: bold;
        color: var(--paper-card-header-color, #000);

      .header .title-text.over-image {
        position: absolute;
        bottom: 0px;

      :host ::content .card-content {
        padding: 16px;

      :host ::content .card-actions {
        border-top: 1px solid #e8e8e8;
        padding: 5px 16px;

    <div class="header">
      <img hidden$="[[!image]]" src="[[image]]">
      <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div>





    is: 'paper-card',

    properties: {

       * The title of the card.
      heading: {
        type: String,
        value: '',
        observer: '_headingChanged'

       * The url of the title image of the card.
      image: {
        type: String,
        value: ''

       * The z-depth of the card, from 0-5.
      elevation: {
        type: Number,
        value: 1,
        reflectToAttribute: true

       * Set this to true to animate the card shadow when setting a new
       * `z` value.
      animatedShadow: {
        type: Boolean,
        value: false

       * Read-only property used to pass down the `animatedShadow` value to
       * the underlying paper-material style (since they have different names).
      animated: {
        type: Boolean,
        reflectToAttribute: true,
        readOnly: true,
        computed: '_computeAnimated(animatedShadow)'

    _headingChanged: function(heading) {
      var label = this.getAttribute('aria-label');
      this.setAttribute('aria-label', heading);

    _computeHeadingClass: function(image) {
      var cls = 'title-text';
      if (image)
        cls += ' over-image';
      return cls;

    _computeAnimated: function(animatedShadow) {
      return animatedShadow;