docs(demos): outline advanced card section

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;
+}
+

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>

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>
+
+
+
+

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>
+
+
+
+

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>
+
+
+
+

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>
 

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() {
+
+    }
+}

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,