diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts
index 654d9c8739..f3ecb76d6d 100644
--- a/packages/demos/angular/src/app/app-routing.module.ts
+++ b/packages/demos/angular/src/app/app-routing.module.ts
@@ -9,6 +9,7 @@ const routes: Routes = [
   { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
   { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
   { path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
+  { path: 'card', loadChildren: 'app/card/card.module#CardModule' },
   { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
   { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
   { path: 'nav', loadChildren: 'app/nav/nav.module#NavModule' },
diff --git a/packages/demos/angular/src/app/card/card-page.component.ts b/packages/demos/angular/src/app/card/card-page.component.ts
new file mode 100644
index 0000000000..251e2d732e
--- /dev/null
+++ b/packages/demos/angular/src/app/card/card-page.component.ts
@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-page',
+  template: `
+  <ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Card</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>Card Header</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile,
+          and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card>
+        <ion-item>
+          <ion-icon name="pin" slot="start"></ion-icon>
+          ion-item in a card, icon left, button right
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
+
+        <ion-card-content>
+          This is content, without any paragraph or header tags,
+          within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card>
+        <ion-item href="#" class="activated">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          Card Link Item 1 .activated
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          Card Link Item 2
+        </ion-item>
+
+        <ion-item class="activated">
+          <ion-icon name="warning" slot="start"></ion-icon>
+          Card Button Item 1 .activated
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          Card Button Item 2
+        </ion-item>
+      </ion-card>
+    </ion-content>
+  </ion-page>
+</ion-app>
+  `
+})
+export class CardPageComponent {
+  constructor() {
+
+  }
+
+  toggleColor() {
+
+  }
+}
diff --git a/packages/demos/angular/src/app/card/card-routing.module.ts b/packages/demos/angular/src/app/card/card-routing.module.ts
new file mode 100644
index 0000000000..516c66eddf
--- /dev/null
+++ b/packages/demos/angular/src/app/card/card-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CardPageComponent } from './card-page.component';
+
+const routes: Routes = [
+  { path: '', component: CardPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CardRoutingModule { }
diff --git a/packages/demos/angular/src/app/card/card.module.ts b/packages/demos/angular/src/app/card/card.module.ts
new file mode 100644
index 0000000000..1a8d312bf8
--- /dev/null
+++ b/packages/demos/angular/src/app/card/card.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CardPageComponent } from './card-page.component';
+import { CardRoutingModule } from './card-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CardRoutingModule
+  ],
+  declarations: [CardPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class CardModule { }
diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html
index 189556e0c4..db71ac1de4 100644
--- a/packages/demos/angular/src/app/home-page/home-page.component.html
+++ b/packages/demos/angular/src/app/home-page/home-page.component.html
@@ -15,6 +15,9 @@
   <li>
     <a href='badge'>Badge Page</a>
   </li>
+  <li>
+    <a href='card'>Card Page</a>
+  </li>
   <li>
     <a href='actionSheet'>Action Sheet Page</a>
   </li>