diff --git a/bower.json b/bower.json
index 4187438..9991bce 100644
--- a/bower.json
+++ b/bower.json
@@ -29,8 +29,10 @@
   "devDependencies": {
     "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "web-component-tester": "^4.0.0",
diff --git a/demo/cafe.png b/demo/cafe.png
new file mode 100644
index 0000000..50f5aad
Binary files /dev/null and b/demo/cafe.png differ
diff --git a/demo/donuts.png b/demo/donuts.png
new file mode 100644
index 0000000..10eeb2d
Binary files /dev/null and b/demo/donuts.png differ
diff --git a/demo/house.png b/demo/house.png
new file mode 100644
index 0000000..b697f9e
Binary files /dev/null and b/demo/house.png differ
diff --git a/demo/index.html b/demo/index.html
index d20c6c1..c4dfbe9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,195 +17,307 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-  <link rel="import" href="../paper-card.html">
-  <link rel="import" href="../../paper-button/paper-button.html">
-  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
   <link rel="import" href="../../iron-collapse/iron-collapse.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-icons/communication-icons.html">
   <link rel="import" href="../../iron-icons/hardware-icons.html">
+  <link rel="import" href="../../iron-icons/social-icons.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+  <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../paper-styles/typography.html">
+  <link rel="import" href="../paper-card.html">
 
-  <link rel="stylesheet" href="../../paper-styles/demo.css">
+  <style is="custom-style" include="demo-pages-shared-styles">
+    demo-snippet {
+      --demo-snippet-demo: {
+        background: var(--paper-grey-200);
+        padding: 8px;
+      };
+      --demo-snippet-code: {
+        max-height: 300px;
+      };
+    }
 
-  <style is="custom-style">
-    body {
-      background-color: var(--paper-grey-50);
+    paper-card {
+      width: 100%;
     }
 
-    #cards {
-      @apply(--layout-vertical);
-      @apply(--center-justified);
-      max-width: 400px;
-      margin-left: auto;
-      margin-right: auto;
+    .horizontal {
+      @apply(--layout-horizontal);
     }
 
-    paper-card {
-      width: 100%;
-      margin-bottom: 16px;
+    .justified {
+      @apply(--layout-justified);
     }
 
-    .avatar {
-      display: inline-block;
-      height: 64px;
-      width: 64px;
-      border-radius: 50%;
-      background: var(--paper-pink-500);
-      color: white;
-      line-height: 64px;
-      font-size: 30px;
-      text-align: center;
+    .amber {
+      background: var(--paper-amber-900);
     }
 
-    .fancy .title {
-      position: absolute;
-      top: 30px;
-      left: 100px;
-      color: var(--paper-indigo-500);
+    .lime {
+      background: var(--paper-lime-500);
     }
 
-    .fancy img {
-      width: 100%;
+    .cyan {
+      background: var(--paper-cyan-500);
     }
 
-    .fancy .big {
-      font-size: 22px;
-      padding: 8px 0 16px;
-      color: var(--google-grey-500);
+    .dark {
+      background: var(--paper-blue-grey-500);
+    }
+    paper-card.dark, paper-card.amber, paper-card.lime, paper-card.cyan {
+      color: white;
+      --paper-card-header-color: white;
+    }
+
+    paper-checkbox {
+      display: block;
+      margin-bottom: 4px;
+      --paper-checkbox-label-color: white;
+      --paper-checkbox-unchecked-color: white;
     }
 
-    .fancy .medium {
-      font-size: 16px;
-      padding-bottom: 8px;
+    paper-icon-button {
+      color: var(--paper-grey-600);
     }
 
-    .pink {
-      --paper-card-header-color: var(--paper-pink-500);
+    paper-icon-button.white {
+      color: white !important;
     }
   </style>
 
 </head>
 <body unresolved>
-  <div id="cards">
-
-    <paper-card>
-      <div class="card-content">
-        <div>Cards are a convenient means of displaying content composed of different types of objects.
-          <br><br>
-          <b>Hurray!</b>
-        </div>
-      </div>
-    </paper-card>
-
-    <paper-card heading="Some cards only have titles"></paper-card>
-
-    <paper-card id="shadow_demo" heading="Paper Shadows" class="pink" animated-shadow>
-      <div class="card-content">
-        Cards can have different shadows.
-      </div>
-      <div class="card-actions">
-        <paper-button onclick="decreaseShadow()">Decrease</paper-button>
-        <paper-button onclick="increaseShadow()">Increase</paper-button>
-      </div>
-    </paper-card>
-
-    <paper-card >
-      <div class="card-content">
-        Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam philosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipiscing ius ea.
-      </div>
-      <div class="card-actions">
-        <paper-icon-button icon="favorite" title="favorite"></paper-icon-button>
-        <paper-icon-button icon="bookmark" title="bookmark"></paper-icon-button>
-        <paper-icon-button icon="cloud-upload" title="cloud-upload"></paper-icon-button>
-      </div>
-    </paper-card>
-
-    <paper-card heading="Cards can have titles" class="pink">
-      <div class="card-content">
-        Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam philosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipiscing ius ea.
-      </div>
-      <div class="card-actions">
-        <paper-button>Nay</paper-button>
-        <paper-button>Yay!</paper-button>
-        <template is="dom-bind" id="expand-demo">
-          <paper-icon-button
-              icon="hardware:keyboard-arrow-up"
-              title="more info"
-              on-tap="_toggleMoreInfo"
-              style="float: right;">
-          </paper-icon-button>
-          <iron-collapse id="more-info">
-            Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per. Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per.
-          </iron-collapse>
+  <body unresolved>
+    <div class="vertical-section-container centered">
+      <h3>A paper-card with a simple heading, header image, body content, and actions</h3>
+      <demo-snippet>
+        <template>
+          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
+            <div class="card-content">
+              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
+            </div>
+            <div class="card-actions">
+              <paper-button>Share</paper-button>
+              <paper-button>Explore!</paper-button>
+            </div>
+          </paper-card>
         </template>
-      </div>
-    </paper-card>
-
-    <paper-card heading="Titles AND images!" class="pink"
-                image="http://placehold.it/350x150">
-      <div class="card-content">
-        Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam philosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipiscing ius ea.
-      </div>
-      <div class="card-actions">
-        <paper-button>No</paper-button>
-        <paper-button>Yes</paper-button>
-      </div>
-    </paper-card>
-
-    <paper-card heading="Actions can be stacked" class="pink">
-      <div class="card-content">
-        Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam philosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipiscing ius ea.
-      </div>
-      <div class="card-actions">
-        <paper-button>Action</paper-button>
-      </div>
-      <div class="card-actions">
-        <paper-button>Moar action!</paper-button>
-      </div>
-    </paper-card>
-
-    <paper-card class='fancy'>
-      <div class="card-content">
-        <div class="avatar">:)</div>
-        <div class="title">
-          <div class="medium">Title</div>
-          <div class="small">subtitle</div>
-        </div>
-      </div>
-
-      <!-- take this out of the content class so that it can span the whole card -->
-      <img src="http://placehold.it/350x150">
-
-      <div class="card-content">
-        <div class="big">Usu eu novum principes, vel quodsi aliquip ea.</div>
-        <div class="medium">Ut labores minimum atomorum pro. Laudem tibique ut has.</div>
-        <div class="small">Usu eu novum principes, vel quodsi aliquip ea.</div>
-      </div>
-    </paper-card>
-  </div>
-
-  <script>
-    function decreaseShadow() {
-      var card = document.querySelector('#shadow_demo');
-      card.elevation = card.elevation > 0 ? card.elevation - 1 : 0;
-    }
+      </demo-snippet>
 
-    function increaseShadow() {
-      var card = document.querySelector('#shadow_demo');
-      card.elevation = card.elevation < 5 ? card.elevation + 1 : 5;
-    }
+      <h3>Paper-cards can contain advanced content</h3>
+      <demo-snippet>
+        <template>
+          <style is="custom-style">
+            .cafe-header { @apply(--paper-font-headline); }
+            .cafe-light { color: var(--paper-grey-600); }
+            .cafe-location {
+              float: right;
+              font-size: 15px;
+              vertical-align: middle;
+            }
+            .cafe-reserve { color: var(--google-blue-500); }
+            iron-icon.star {
+              --iron-icon-width: 16px;
+              --iron-icon-height: 16px;
+              color: var(--paper-amber-500);
+            }
+            iron-icon.star:last-of-type { color: var(--paper-grey-500); }
+          </style>
+            <paper-card image="./donuts.png">
+              <div class="card-content">
+                <div class="cafe-header">Cafe Basilico
+                  <div class="cafe-location cafe-light">
+                    <iron-icon icon="communication:location-on"></iron-icon>
+                    <span>250ft</span>
+                  </div>
+                </div>
+                <div class="cafe-rating">
+                  <iron-icon class="star" icon="star"></iron-icon>
+                  <iron-icon class="star" icon="star"></iron-icon>
+                  <iron-icon class="star" icon="star"></iron-icon>
+                  <iron-icon class="star" icon="star"></iron-icon>
+                  <iron-icon class="star" icon="star"></iron-icon>
+                </div>
+                <p>$・Italian, Cafe</p>
+                <p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting with 12 indoor seats plus patio seating.</p>
+              </div>
+              <div class="card-actions">
+                <p>Tonight's availability</p>
+                <div class="horizontal justified">
+                  <paper-icon-button icon="icons:event"></paper-icon-button>
+                  <paper-button>5:30PM</paper-button>
+                  <paper-button>7:30PM</paper-button>
+                  <paper-button>9:00PM</paper-button>
+                </div>
+                <paper-button class="cafe-reserve">Reserve</paper-button>
+              </div>
+            </paper-card>
+        </template>
+      </demo-snippet>
 
-    var expandDemo = document.getElementById('expand-demo');
+      <h3>Paper-cards can have a horizontal image</h3>
+      <demo-snippet>
+        <template>
+          <style is="custom-style">
+            paper-card.rate { @apply(--layout-horizontal); }
+            .rate-image {
+              width: 100px;
+              height: 170px;
+              background: url('./donuts.png');
+              background-size: cover;
+            }
+            .rate-content {
+              @apply(--layout-flex);
+              float: left;
+            }
+            .rate-header { @apply(--paper-font-headline); }
+            .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
+            paper-icon-button.rate-icon {
+              --iron-icon-fill-color: white;
+              --iron-icon-stroke-color: var(--paper-grey-600);
+            }
+          </style>
+          <paper-card class="rate">
+            <div class="rate-content">
+              <div class="card-content">
+                <div class="rate-header">Rate this album</div>
+                <div class="rate-name">Mac Miller</div>
+                <div>Live from space</div>
+              </div>
+              <div class="card-actions">
+                <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
+                <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
+                <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
+                <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
+                <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
+              </div>
+            </div>
+            <div class="rate-image"></div>
+          </paper-card>
+        </template>
+      </demo-snippet>
+
+      <h3>Paper-cards can have expanded supporting text</h3>
+      <demo-snippet>
+        <template>
+          <paper-card heading="Top western road trips" image="./trip.png" class="white">
+            <div class="card-content">1,000 miles of wonder</div>
+            <div class="card-actions">
+              <paper-button>Share</paper-button>
+              <paper-button>Explore</paper-button>
+              <paper-icon-button
+                icon="hardware:keyboard-arrow-up"
+                title="more info"
+                onclick="_toggle()"
+                style="float:right;">
+              </paper-icon-button>
+              <iron-collapse id="more-info" style="width:100%;">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent enim ante, tempus eget volutpat ac, cursus ac ante. Nulla facilisi. Praesent sed lacinia ligula. Donec malesuada nisl eget quam iaculis, vel placerat justo cursus.
+              </iron-collapse>
+              <script>
+                function _toggle() {
+                  var moreInfo = document.getElementById('more-info');
+                  var iconButton = Polymer.dom(event).localTarget;
+                  iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
+                                                    : 'hardware:keyboard-arrow-down';
+                  moreInfo.toggle();
+                }
+              </script>
+            </div>
+          </paper-card>
+        </template>
+      </demo-snippet>
 
-    expandDemo._toggleMoreInfo = function(event) {
-      var moreInfo = document.getElementById('more-info');
-      var iconButton = Polymer.dom(event).localTarget;
-      iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
-                                        : 'hardware:keyboard-arrow-down';
-      moreInfo.toggle();
-    };
- </script>
+      <h3>Paper-cards can be organized in different collections</h3>
 
+      <h3>Same layout, different content</h3>
+      <demo-snippet>
+        <template>
+          <style is="custom-style">
+            paper-card.white {
+              --paper-card-header-color: #fff;
+            }
+          </style>
+          <paper-card heading="Pre-fab homes" image="./house.png" class="white" style="margin-bottom:8px;">
+            <div class="card-actions">
+              <paper-icon-button icon="favorite"></paper-icon-button>
+              <paper-icon-button icon="bookmark"></paper-icon-button>
+              <paper-icon-button icon="social:share"></paper-icon-button>
+            </div>
+          </paper-card>
+          <div class="horizontal">
+            <paper-card heading="Favorite trips" image="./trip.png" class="white" style="margin-right:4px;">
+              <div class="card-actions horizontal justified">
+                <paper-icon-button icon="favorite"></paper-icon-button>
+                <paper-icon-button icon="bookmark"></paper-icon-button>
+                <paper-icon-button icon="social:share"></paper-icon-button>
+              </div>
+            </paper-card>
+            <paper-card heading="Best airlines" image="./travel.png" class="white" style="margin-left:4px;">
+              <div class="card-actions horizontal justified">
+                <paper-icon-button icon="favorite"></paper-icon-button>
+                <paper-icon-button icon="bookmark"></paper-icon-button>
+                <paper-icon-button icon="social:share"></paper-icon-button>
+              </div>
+            </paper-card>
+          </div>
+        </template>
+      </demo-snippet>
+
+      <h3>Different layout and content</h3>
+      <demo-snippet>
+        <template>
+          <style is="custom-style">
+            #notes {
+              @apply(--layout-vertical);
+              @apply(--layout-wrap);
+              height: 344px;
+              width: 384px;
+            }
+
+            #notes > paper-card {
+              box-sizing: border-box;
+              max-width: 184px;
+              margin: 4px;
+              flex: 0 0 auto;
+            }
+          </style>
+          <div id="notes">
+            <paper-card heading="Call Jennifer" class="cyan">
+              <div class="card-actions">
+                <paper-icon-button icon="communication:call" style="color:white;"></paper-icon-button>
+                <span>March 19, 2017</span>
+              </div>
+            </paper-card>
+            <paper-card class="dark">
+              <div class="card-content">
+                <p>Groceries:</p>
+                <paper-checkbox>almond milk</paper-checkbox>
+                <paper-checkbox>coconut water</paper-checkbox>
+                <paper-checkbox>cheese</paper-checkbox>
+                <paper-checkbox>green apples</paper-checkbox>
+              </div>
+              <div class="card-actions">
+                <paper-icon-button icon="communication:location-on" style="color:white"></paper-icon-button>
+                <span>Campbell</span>
+              </div>
+            </paper-card>
+            <paper-card heading="clean desk" class="lime"></paper-card>
+            <paper-card image="./donuts.png" class="amber">
+              <div class="card-content">New cafe opened on Valencia St.</div>
+            </paper-card>
+            <paper-card heading="Yuna tickets on sale 6/24" class="cyan">
+            </paper-card>
+          </div>
+        </template>
+      </demo-snippet>
+    </div>
 </body>
 </html>
diff --git a/demo/travel.png b/demo/travel.png
new file mode 100644
index 0000000..13c7c6d
Binary files /dev/null and b/demo/travel.png differ
diff --git a/demo/trip.png b/demo/trip.png
new file mode 100644
index 0000000..6ccb46c
Binary files /dev/null and b/demo/trip.png differ