diff --git a/demos/component-docs/cards/cards-basic.html b/demos/component-docs/cards/cards-basic.html
new file mode 100644
index 0000000000..c8fd577604
--- /dev/null
+++ b/demos/component-docs/cards/cards-basic.html
@@ -0,0 +1,18 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Basic Cards</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+  TODO
+  <ion-card>
+
+  </ion-card>
+
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards-header.html b/demos/component-docs/cards/cards-header.html
new file mode 100644
index 0000000000..80a561a1cb
--- /dev/null
+++ b/demos/component-docs/cards/cards-header.html
@@ -0,0 +1,17 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Card Headers</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+  TODO
+  <ion-card>
+
+  </ion-card>
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards.html b/demos/component-docs/cards/cards-image.html
similarity index 95%
rename from demos/component-docs/cards/cards.html
rename to demos/component-docs/cards/cards-image.html
index 53f981014b..6117f109f6 100644
--- a/demos/component-docs/cards/cards.html
+++ b/demos/component-docs/cards/cards-image.html
@@ -1,6 +1,6 @@
 
 <ion-navbar *navbar class="show-navbar">
-  <ion-title>Cards</ion-title>
+  <ion-title>Card Images</ion-title>
 </ion-navbar>
 
 <ion-content class="has-header components-demo">
diff --git a/demos/component-docs/cards/cards-list.html b/demos/component-docs/cards/cards-list.html
new file mode 100644
index 0000000000..09d504165c
--- /dev/null
+++ b/demos/component-docs/cards/cards-list.html
@@ -0,0 +1,18 @@
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>Card Lists</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header components-demo">
+
+  TODO
+  <ion-card>
+
+  </ion-card>
+
+
+</ion-content>
+
+
+
+
diff --git a/demos/component-docs/cards/cards.ts b/demos/component-docs/cards/cards.ts
index 59ad90e16b..492a85bf44 100644
--- a/demos/component-docs/cards/cards.ts
+++ b/demos/component-docs/cards/cards.ts
@@ -1,9 +1,37 @@
 import {Page} from 'ionic/ionic';
 
 @Page({
-  templateUrl: 'cards/cards.html',
+  templateUrl: 'cards/cards-basic.html',
 })
-export class CardsPage {
+export class CardsBasicPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+  templateUrl: 'cards/cards-header.html',
+})
+export class CardsHeaderPage {
+    constructor() {
+
+    }
+}
+
+
+@Page({
+  templateUrl: 'cards/cards-list.html',
+})
+export class CardsListPage {
+    constructor() {
+
+    }
+}
+
+@Page({
+  templateUrl: 'cards/cards-image.html',
+})
+export class CardsImagePage {
     constructor() {
 
     }
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index ba55e49681..1d064bb8bc 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -15,7 +15,10 @@ import {ButtonsPage,
         IconButtonsPage,
         ButtonsInComponentsPage} from './buttons/buttons';
 
-import {CardsPage} from './cards/cards';
+import {CardsBasicPage,
+        CardsImagePage,
+        CardsHeaderPage,
+        CardsListPage} from './cards/cards';
 
 import {FormsPage,
         FixedInlinePage,
@@ -63,7 +66,11 @@ export function getPageFor(hash) {
         'buttons-in-components': ButtonsInComponentsPage,
         'button-sizes': ButtonSizesPage,
         'icon-buttons': IconButtonsPage,
-        'cards': CardsPage,
+
+        'cards': CardsBasicPage,
+        'card-header': CardsHeaderPage,
+        'card-list': CardsListPage,
+        'card-image': CardsImagePage,
 
         'forms': FormsPage,
         'fixed-inline-labels': FixedInlinePage,