diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 39ee3f4e1e..78f0f3f998 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -134,3 +134,12 @@ ion-card ion-card-content.buttons-in-components img {
 ion-card.buttons-in-components {
   margin-bottom: 2em;
 }
+
+ion-card.cards-list-demo ion-card-header {
+  color: #387df5;
+}
+
+ion-card.cards-list-demo a > icon {
+  color: #444444;
+}
+
diff --git a/demos/component-docs/cards/cards-advanced-image.html b/demos/component-docs/cards/cards-advanced-image.html
new file mode 100644
index 0000000000..965c668d22
--- /dev/null
+++ b/demos/component-docs/cards/cards-advanced-image.html
@@ -0,0 +1,17 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Advanced: Image</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+<ion-card>
+
+  <ion-card-content>
+    This is just your basic card with some text to boot. Like it?  Keep scrolling...
+  </ion-card-content>
+
+</ion-card>
+
+
+</ion-content>
diff --git a/demos/component-docs/cards/cards-advanced-map.html b/demos/component-docs/cards/cards-advanced-map.html
new file mode 100644
index 0000000000..b180e22b3b
--- /dev/null
+++ b/demos/component-docs/cards/cards-advanced-map.html
@@ -0,0 +1,21 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Advanced: Map</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+<ion-card>
+
+  <ion-card-content>
+    This is just your basic card with some text to boot. Like it?  Keep scrolling...
+  </ion-card-content>
+
+</ion-card>
+
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards-advanced-social.html b/demos/component-docs/cards/cards-advanced-social.html
new file mode 100644
index 0000000000..7a769b08ed
--- /dev/null
+++ b/demos/component-docs/cards/cards-advanced-social.html
@@ -0,0 +1,21 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Advanced: Social</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+<ion-card>
+
+  <ion-card-content>
+    This is just your basic card with some text to boot. Like it?  Keep scrolling...
+  </ion-card-content>
+
+</ion-card>
+
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards-background.html b/demos/component-docs/cards/cards-background.html
new file mode 100644
index 0000000000..d320f5d7f5
--- /dev/null
+++ b/demos/component-docs/cards/cards-background.html
@@ -0,0 +1,21 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Background Images</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+<ion-card>
+
+  <ion-card-content>
+    This is just your basic card with some text to boot. Like it?  Keep scrolling...
+  </ion-card-content>
+
+</ion-card>
+
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards-list.html b/demos/component-docs/cards/cards-list.html
index 3954fda509..784a67e0bb 100644
--- a/demos/component-docs/cards/cards-list.html
+++ b/demos/component-docs/cards/cards-list.html
@@ -5,9 +5,9 @@
 
 <ion-content class="has-header components-demo">
 
-  <ion-card>
+  <ion-card class="cards-list-demo">
 
-      <ion-card-header style="color: #387df5">
+      <ion-card-header>
         Explore Nearby
       </ion-card-header>
 
diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts
index 492a85bf44..8ec1919779 100644
--- a/demos/component-docs/cards/cards.ts
+++ b/demos/component-docs/cards/cards.ts
@@ -36,3 +36,39 @@ export class CardsImagePage {
 
     }
 }
+
+@Page({
+  templateUrl: 'cards/cards-background.html',
+})
+export class CardsBackgroundPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+  templateUrl: 'cards/cards-advanced-social.html',
+})
+export class CardsAdvancedSocialPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+  templateUrl: 'cards/cards-advanced-map.html',
+})
+export class CardsAdvancedMapPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+  templateUrl: 'cards/cards-advanced-image.html',
+})
+export class CardsAdvancedImagePage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index 1d064bb8bc..00f9ebb450 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -18,7 +18,11 @@ import {ButtonsPage,
 import {CardsBasicPage,
         CardsImagePage,
         CardsHeaderPage,
-        CardsListPage} from './cards/cards';
+        CardsListPage,
+        CardsBackgroundPage,
+        CardsAdvancedMapPage,
+        CardsAdvancedSocialPage,
+        CardsAdvancedImagePage} from './cards/cards';
 
 import {FormsPage,
         FixedInlinePage,
@@ -71,6 +75,10 @@ export function getPageFor(hash) {
         'card-header': CardsHeaderPage,
         'card-list': CardsListPage,
         'card-image': CardsImagePage,
+        'card-background-image': CardsBackgroundPage,
+        'card-advanced-map': CardsAdvancedMapPage,
+        'card-advanced-social': CardsAdvancedSocialPage,
+        'card-advanced-image': CardsAdvancedImagePage,
 
         'forms': FormsPage,
         'fixed-inline-labels': FixedInlinePage,