diff --git a/docs/_assets/demos/dog.png b/docs/_assets/demos/dog.png
new file mode 100644
index 00000000..07743e51
Binary files /dev/null and b/docs/_assets/demos/dog.png differ
diff --git a/docs/_assets/demos/image_card.jpg b/docs/_assets/demos/image_card.jpg
new file mode 100644
index 00000000..23a5822f
Binary files /dev/null and b/docs/_assets/demos/image_card.jpg differ
diff --git a/docs/_assets/demos/welcome_card.jpg b/docs/_assets/demos/welcome_card.jpg
new file mode 100644
index 00000000..af7f15f3
Binary files /dev/null and b/docs/_assets/demos/welcome_card.jpg differ
diff --git a/docs/_pages/components.md b/docs/_pages/components.md
index 29825c72..53ea7798 100644
--- a/docs/_pages/components.md
+++ b/docs/_pages/components.md
@@ -61,6 +61,18 @@ categories:
     components:
       - name: card
         class: mdl-card
+        snippets:
+          - snippet_group:
+            - caption: Wide
+              file: wide.html
+          - snippet_group:
+            - caption: Square
+              file: square.html
+          - snippet_group:
+            - caption: Image
+              file: image.html
+            - caption: Event
+              file: event.html
   - name: layout
     title: Layout
     description: Building blocks for constructing a page layout.
diff --git a/src/card/demo.css b/src/card/demo.css
deleted file mode 100644
index 1bcef4bb..00000000
--- a/src/card/demo.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.demo-page--card .mdl-card {
-  margin: 20px;
-}
-
-.demo-card--wide {
-  width: 600px;
-}
diff --git a/src/card/demo.html b/src/card/demo.html
deleted file mode 100644
index 3a47dad8..00000000
--- a/src/card/demo.html
+++ /dev/null
@@ -1,68 +0,0 @@
-  <div class="demo-preview-block demo-page--card">
-    <div class="mdl-card mdl-shadow--2dp">
-      <div class="mdl-card__title">
-         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__supporting-text">
-        March 24th, 2014
-      </div>
-      <div class="mdl-card__supporting-text">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
-      </div>
-      <div class="mdl-card__actions">
-         <a href="#" class="mdl-button">Some Action</a>
-      </div>
-    </div>
-    <div class="mdl-card mdl-shadow--3dp demo-card--wide">
-      <div class="mdl-card__title">
-         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__supporting-text">
-        March 24th, 2014
-      </div>
-      <div class="mdl-card__supporting-text">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
-      </div>
-      <div class="mdl-card__actions">
-         <a href="#" class="mdl-button">Some Action</a>
-      </div>
-    </div>
-    <div class="mdl-card mdl-shadow--4dp">
-      <div class="mdl-card__title">
-         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__supporting-text">
-        March 24th, 2014
-      </div>
-      <div class="mdl-card__supporting-text">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
-      </div>
-      <div class="mdl-card__actions">
-         <a href="#" class="mdl-button">Some Action</a>
-      </div>
-    </div>
-    <div class="mdl-card mdl-shadow--4dp">
-      <div class="mdl-card__title">
-         <h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
-      </div>
-      <div class="mdl-card__supporting-text">
-        March 24th, 2014
-      </div>
-      <div class="mdl-card__supporting-text">
-        Lorem ipsum dolor sit amet.
-      </div>
-      <div class="mdl-card__actions">
-         <a href="#" class="mdl-button">Some Action</a>
-      </div>
-      <div class="mdl-card__menu">
-        <button id="btn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="btn">
-          <button class="mdl-menu__item">Item 1</button>
-          <button class="mdl-menu__item">Item 2</button>
-          <button class="mdl-menu__item" disabled>Item 3</button>
-        </ul>
-      </div>
-    </div>
-  </div>
diff --git a/src/card/snippets/event.html b/src/card/snippets/event.html
new file mode 100644
index 00000000..02353eba
--- /dev/null
+++ b/src/card/snippets/event.html
@@ -0,0 +1,29 @@
+<style>
+  .demo-card-event {
+    width: 256px;
+    height: 256px;
+    background: #3E4EB8;
+  }
+  .demo-card-event > .mdl-card__actions {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  .demo-card-event > .mdl-card__title,
+  .demo-card-event > .mdl-card__actions > .mdl-button {
+    color: #fff;
+  }
+</style>
+
+<div class="mdl-card mdl-shadow--2dp demo-card-event">
+  <div class="mdl-card__title mdl-card--expand">
+    <h4>
+      Featured event:<br>
+      May 24, 2016<br>
+      7-11pm
+    </h4>
+  </div>
+  <div class="mdl-card__actions mdl-card--border">
+    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+      Add to Calendar
+    </a>
+  </div>
+</div>
diff --git a/src/card/snippets/image.html b/src/card/snippets/image.html
new file mode 100644
index 00000000..78e67448
--- /dev/null
+++ b/src/card/snippets/image.html
@@ -0,0 +1,22 @@
+<style>
+  .demo-card-image {
+    width: 256px;
+    height: 256px;
+    background: url('../assets/demos/image_card.jpg') center / cover;
+  }
+  .demo-card-image > .mdl-card__actions {
+    height: 52px;
+    padding: 16px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .demo-card-image__filename {
+    color: #fff;
+  }
+</style>
+
+<div class="mdl-card mdl-shadow--2dp demo-card-image">
+  <div class="mdl-card__title mdl-card--expand"></div>
+  <div class="mdl-card__actions">
+    <span class="demo-card-image__filename">Image.jpg</span>
+  </div>
+</div>
diff --git a/src/card/snippets/square.html b/src/card/snippets/square.html
new file mode 100644
index 00000000..b5c0894c
--- /dev/null
+++ b/src/card/snippets/square.html
@@ -0,0 +1,26 @@
+<style>
+  .demo-card-square {
+    width: 320px;
+    height: 320px;
+  }
+  .demo-card-square > .mdl-card__title {
+    color: #fff;
+    background:
+      url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
+  }
+</style>
+
+<div class="mdl-card mdl-shadow--2dp demo-card-square">
+  <div class="mdl-card__title mdl-card--expand">
+    <h2 class="mdl-card__title-text">Update</h2>
+  </div>
+  <div class="mdl-card__supporting-text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Aenan convallis.
+  </div>
+  <div class="mdl-card__actions mdl-card--border">
+    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+      View Updates
+    </a>
+  </div>
+</div>
diff --git a/src/card/snippets/wide.html b/src/card/snippets/wide.html
new file mode 100644
index 00000000..7fafe3a6
--- /dev/null
+++ b/src/card/snippets/wide.html
@@ -0,0 +1,33 @@
+<style>
+  .demo-card-wide {
+    width: 512px;
+  }
+  .demo-card-wide > .mdl-card__title {
+    color: #fff;
+    height: 176px;
+    background: url('../assets/demos/welcome_card.jpg') center / cover;
+  }
+  .demo-card-wide > .mdl-card__menu {
+    color: #fff;
+  }
+</style>
+
+<div class="mdl-card mdl-shadow--2dp demo-card-wide">
+  <div class="mdl-card__title">
+    <h2 class="mdl-card__title-text">Welcome</h2>
+  </div>
+  <div class="mdl-card__supporting-text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Mauris sagittis pellentesque lacus eleifend lacinia...
+  </div>
+  <div class="mdl-card__actions mdl-card--border">
+    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+      Get Started
+    </a>
+  </div>
+  <div class="mdl-card__menu">
+    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+      <i class="material-icons">share</i>
+    </button>
+  </div>
+</div>