diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 9c7bbe5f86..b83121e86c 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -473,6 +473,38 @@ declare global {
 }
 
 
+import {
+  CardSubtitle as IonCardSubtitle
+} from './components/card-subtitle/card-subtitle';
+
+declare global {
+  interface HTMLIonCardSubtitleElement extends IonCardSubtitle, HTMLElement {
+  }
+  var HTMLIonCardSubtitleElement: {
+    prototype: HTMLIonCardSubtitleElement;
+    new (): HTMLIonCardSubtitleElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-card-subtitle": HTMLIonCardSubtitleElement;
+  }
+  interface ElementTagNameMap {
+    "ion-card-subtitle": HTMLIonCardSubtitleElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-card-subtitle": JSXElements.IonCardSubtitleAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonCardSubtitleAttributes extends HTMLAttributes {
+      
+        color?: string,
+        mode?: 'ios' | 'md' | 'wp'
+    }
+  }
+}
+
+
 import {
   CardTitle as IonCardTitle
 } from './components/card-title/card-title';
diff --git a/packages/core/src/components/card-content/card-content.ios.scss b/packages/core/src/components/card-content/card-content.ios.scss
index 0091c10a4b..43168ded82 100644
--- a/packages/core/src/components/card-content/card-content.ios.scss
+++ b/packages/core/src/components/card-content/card-content.ios.scss
@@ -6,19 +6,19 @@
 // --------------------------------------------------
 
 /// @prop - Padding top of the card
-$card-ios-padding-top:                 13px !default;
+$card-ios-padding-top:                 20px !default;
 
 /// @prop - Padding end of the card
-$card-ios-padding-end:                 16px !default;
+$card-ios-padding-end:                 $card-ios-padding-top !default;
 
 /// @prop - Padding bottom of the card
-$card-ios-padding-bottom:              14px !default;
+$card-ios-padding-bottom:              $card-ios-padding-top !default;
 
 /// @prop - Padding start of the card
-$card-ios-padding-start:               16px !default;
+$card-ios-padding-start:               $card-ios-padding-top !default;
 
 /// @prop - Font size of the card
-$card-ios-font-size:                   1.4rem !default;
+$card-ios-font-size:                   1.6rem !default;
 
 
 .card-content-ios {
@@ -28,11 +28,6 @@ $card-ios-font-size:                   1.4rem !default;
   line-height: 1.4;
 }
 
-.card-header-ios + .card-content-ios,
-.card-ios .item + .card-content-ios {
-  @include padding(0, null, null, null);
-}
-
 
 // Generate iOS Card Content Colors
 // --------------------------------------------------
diff --git a/packages/core/src/components/card-content/card-content.md.scss b/packages/core/src/components/card-content/card-content.md.scss
index a542dd3c0c..2451db44a8 100644
--- a/packages/core/src/components/card-content/card-content.md.scss
+++ b/packages/core/src/components/card-content/card-content.md.scss
@@ -31,11 +31,6 @@ $card-md-line-height:                 1.5 !default;
   line-height: $card-md-line-height;
 }
 
-.card-header-md + .card-content-md,
-.card-md .item + .card-content-md {
-  @include padding(0, null, null, null);
-}
-
 
 // Generate Material Design Card Content Colors
 // --------------------------------------------------
diff --git a/packages/core/src/components/card-content/card-content.scss b/packages/core/src/components/card-content/card-content.scss
index e1dd30c9d3..8201e48c79 100644
--- a/packages/core/src/components/card-content/card-content.scss
+++ b/packages/core/src/components/card-content/card-content.scss
@@ -6,4 +6,6 @@
 
 ion-card-content {
   display: block;
+
+  position: relative;
 }
diff --git a/packages/core/src/components/card-header/card-header.ios.scss b/packages/core/src/components/card-header/card-header.ios.scss
index 2672d68ace..3251acb75d 100644
--- a/packages/core/src/components/card-header/card-header.ios.scss
+++ b/packages/core/src/components/card-header/card-header.ios.scss
@@ -5,57 +5,19 @@
 // iOS Card Header
 // --------------------------------------------------
 
-/// @prop - Font size of the card header
-$card-ios-header-font-size:            1.6rem !default;
-
-/// @prop - Font weight of the card header
-$card-ios-header-font-weight:          500 !default;
-
 /// @prop - Padding top of the card header
-$card-ios-header-padding-top:          16px !default;
+$card-ios-header-padding-top:          20px !default;
 
 /// @prop - Padding end of the card header
 $card-ios-header-padding-end:          $card-ios-header-padding-top !default;
 
 /// @prop - Padding bottom of the card header
-$card-ios-header-padding-bottom:       $card-ios-header-padding-top !default;
+$card-ios-header-padding-bottom:       16px !default;
 
 /// @prop - Padding start of the card header
 $card-ios-header-padding-start:        $card-ios-header-padding-end !default;
 
-/// @prop - Color of the card header
-$card-ios-header-color:                #333 !default;
-
 
 .card-header-ios {
   @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
-
-  font-size: $card-ios-header-font-size;
-  font-weight: $card-ios-header-font-weight;
-  color: $card-ios-header-color;
-}
-
-
-// Generate iOS Card Header Colors
-// --------------------------------------------------
-
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-
-  .card-ios-#{$color-name} {
-
-    .card-header-ios {
-      color: $color-contrast;
-    }
-
-    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-      .card-header-ios-#{$color-name} {
-        color: $color-base;
-      }
-    }
-  }
-
-  .card-header-ios-#{$color-name} {
-    color: $color-base;
-  }
-
 }
diff --git a/packages/core/src/components/card-header/card-header.md.scss b/packages/core/src/components/card-header/card-header.md.scss
index 75a6f6f52c..2c9b917d9c 100644
--- a/packages/core/src/components/card-header/card-header.md.scss
+++ b/packages/core/src/components/card-header/card-header.md.scss
@@ -5,9 +5,6 @@
 // Material Design Card Header
 // --------------------------------------------------
 
-/// @prop - Font size of the card header
-$card-md-header-font-size:            1.6rem !default;
-
 /// @prop - Padding top of the card header
 $card-md-header-padding-top:          16px !default;
 
@@ -20,38 +17,7 @@ $card-md-header-padding-bottom:       $card-md-header-padding-top !default;
 /// @prop - Padding start of the card header
 $card-md-header-padding-start:        $card-md-header-padding-end !default;
 
-/// @prop - Color of the card header
-$card-md-header-color:                #222 !default;
-
 
 .card-header-md {
   @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
-
-  font-size: $card-md-header-font-size;
-  color: $card-md-header-color;
-}
-
-
-// Generate Material Design Card Header Colors
-// --------------------------------------------------
-
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-
-  .card-md-#{$color-name} {
-
-    .card-header-md {
-      color: $color-contrast;
-    }
-
-    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-      .card-header-md-#{$color-name} {
-        color: $color-base;
-      }
-    }
-  }
-
-  .card-header-md-#{$color-name} {
-    color: $color-base;
-  }
-
-}
+}
\ No newline at end of file
diff --git a/packages/core/src/components/card-header/card-header.scss b/packages/core/src/components/card-header/card-header.scss
index afa4775fd0..e5f9b665e4 100644
--- a/packages/core/src/components/card-header/card-header.scss
+++ b/packages/core/src/components/card-header/card-header.scss
@@ -11,4 +11,6 @@ ion-card-header {
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  position: relative;
 }
diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss
new file mode 100644
index 0000000000..dbd7d01350
--- /dev/null
+++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss
@@ -0,0 +1,70 @@
+@import "../../themes/ionic.globals.ios";
+@import "./card-subtitle";
+
+
+// iOS Card Subtitle
+// --------------------------------------------------
+
+/// @prop - Font size of the card subtitle
+$card-ios-subtitle-font-size:            1.6rem !default;
+
+/// @prop - Font weight of the card subtitle
+$card-ios-subtitle-font-weight:          700 !default;
+
+/// @prop - Font weight of the card subtitle
+$card-ios-subtitle-text-transform:       uppercase !default;
+
+/// @prop - Letter spacing of the card subtitle
+$card-ios-subtitle-letter-spacing:       .06rem !default;
+
+/// @prop - Padding top of the card subtitle
+$card-ios-subtitle-padding-top:          0 !default;
+
+/// @prop - Padding end of the card subtitle
+$card-ios-subtitle-padding-end:          $card-ios-subtitle-padding-top !default;
+
+/// @prop - Padding bottom of the card subtitle
+$card-ios-subtitle-padding-bottom:       $card-ios-subtitle-padding-top !default;
+
+/// @prop - Padding start of the card subtitle
+$card-ios-subtitle-padding-start:        $card-ios-subtitle-padding-end !default;
+
+/// @prop - Color of the card subtitle
+$card-ios-subtitle-color:                rgba(0, 0, 0, 0.4) !default;
+
+
+
+.card-subtitle-ios {
+  @include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start);
+
+  font-size: $card-ios-subtitle-font-size;
+  font-weight: $card-ios-subtitle-font-weight;
+  text-transform: $card-ios-subtitle-text-transform;
+  letter-spacing: $card-ios-subtitle-letter-spacing;
+  color: $card-ios-subtitle-color;
+}
+
+
+// Generate iOS Card subtitle Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .card-ios-#{$color-name} {
+
+    .card-subtitle-ios {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+      .card-subtitle-ios-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-subtitle-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}
\ No newline at end of file
diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.scss
new file mode 100644
index 0000000000..b07469d3f1
--- /dev/null
+++ b/packages/core/src/components/card-subtitle/card-subtitle.md.scss
@@ -0,0 +1,57 @@
+@import "../../themes/ionic.globals.md";
+@import "./card-subtitle";
+
+
+// Material Design Card Subtitle
+// --------------------------------------------------
+
+/// @prop - Font size of the card subtitle
+$card-md-subtitle-font-size:            1.6rem !default;
+
+/// @prop - Padding top of the card subtitle
+$card-md-subtitle-padding-top:          0 !default;
+
+/// @prop - Padding end of the card subtitle
+$card-md-subtitle-padding-end:          $card-md-subtitle-padding-top !default;
+
+/// @prop - Padding bottom of the card subtitle
+$card-md-subtitle-padding-bottom:       $card-md-subtitle-padding-top !default;
+
+/// @prop - Padding start of the card subtitle
+$card-md-subtitle-padding-start:        $card-md-subtitle-padding-end !default;
+
+/// @prop - Color of the card subtitle
+$card-md-subtitle-color:                #222 !default;
+
+
+.card-subtitle-md {
+  @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start);
+
+  font-size: $card-md-subtitle-font-size;
+  color: $card-md-subtitle-color;
+}
+
+
+// Generate Material Design Card subtitle Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .card-md-#{$color-name} {
+
+    .card-subtitle-md {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      .card-subtitle-md-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-subtitle-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/card-subtitle/card-subtitle.scss b/packages/core/src/components/card-subtitle/card-subtitle.scss
new file mode 100644
index 0000000000..4746bbb0bd
--- /dev/null
+++ b/packages/core/src/components/card-subtitle/card-subtitle.scss
@@ -0,0 +1,11 @@
+@import "../../themes/ionic.globals";
+
+
+// Card Subtitle
+// --------------------------------------------------
+
+ion-card-subtitle {
+  display: block;
+
+  position: relative;
+}
diff --git a/packages/core/src/components/card-subtitle/card-subtitle.tsx b/packages/core/src/components/card-subtitle/card-subtitle.tsx
new file mode 100644
index 0000000000..85e0e3395f
--- /dev/null
+++ b/packages/core/src/components/card-subtitle/card-subtitle.tsx
@@ -0,0 +1,39 @@
+import { Component, Prop} from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-card-subtitle',
+  styleUrls: {
+    ios: 'card-subtitle.ios.scss',
+    md: 'card-subtitle.md.scss'
+  },
+  host: {
+    theme: 'card-subtitle'
+  }
+})
+export class CardSubtitle {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  hostData() {
+    return {
+      'role': 'heading',
+      'aria-level': '3'
+    };
+  }
+
+  protected render() {
+    return <slot></slot>;
+  }
+}
diff --git a/packages/core/src/components/card-title/card-title.ios.scss b/packages/core/src/components/card-title/card-title.ios.scss
index 418f569930..3fba445f37 100644
--- a/packages/core/src/components/card-title/card-title.ios.scss
+++ b/packages/core/src/components/card-title/card-title.ios.scss
@@ -6,34 +6,37 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card title
-$card-ios-title-font-size:             1.8rem !default;
+$card-ios-title-font-size:             2.8rem !default;
+
+/// @prop - Font weight of the card title
+$card-ios-title-font-weight:           700 !default;
 
 /// @prop - Padding top of the card title
-$card-ios-title-padding-top:           8px !default;
+$card-ios-title-padding-top:           0 !default;
 
 /// @prop - Padding end of the card title
-$card-ios-title-padding-end:           0 !default;
+$card-ios-title-padding-end:           $card-ios-title-padding-top !default;
 
 /// @prop - Padding bottom of the card title
-$card-ios-title-padding-bottom:        8px !default;
+$card-ios-title-padding-bottom:        $card-ios-title-padding-top !default;
 
 /// @prop - Padding start of the card title
-$card-ios-title-padding-start:         0 !default;
+$card-ios-title-padding-start:         $card-ios-title-padding-top !default;
 
 /// @prop - Margin top of the card title
-$card-ios-title-margin-top:            2px !default;
+$card-ios-title-margin-top:            0 !default;
 
 /// @prop - Margin end of the card title
-$card-ios-title-margin-end:            0 !default;
+$card-ios-title-margin-end:            $card-ios-title-margin-top !default;
 
 /// @prop - Margin bottom of the card title
-$card-ios-title-margin-bottom:         2px !default;
+$card-ios-title-margin-bottom:         $card-ios-title-margin-top !default;
 
 /// @prop - Margin start of the card title
-$card-ios-title-margin-start:          0 !default;
+$card-ios-title-margin-start:          $card-ios-title-margin-top !default;
 
 /// @prop - Color of the card title
-$card-ios-title-text-color:            #222 !default;
+$card-ios-title-text-color:            #000 !default;
 
 
 .card-title-ios {
@@ -44,6 +47,7 @@ $card-ios-title-text-color:            #222 !default;
   display: block;
 
   font-size: $card-ios-title-font-size;
+  font-weight: $card-ios-title-font-weight;
   line-height: 1.2;
   color: $card-ios-title-text-color;
 }
diff --git a/packages/core/src/components/card-title/card-title.md.scss b/packages/core/src/components/card-title/card-title.md.scss
index 7630bc9d99..4ec7ef442f 100644
--- a/packages/core/src/components/card-title/card-title.md.scss
+++ b/packages/core/src/components/card-title/card-title.md.scss
@@ -9,25 +9,25 @@
 $card-md-title-font-size:             2.4rem !default;
 
 /// @prop - Padding top of the card title
-$card-md-title-padding-top:           8px !default;
+$card-md-title-padding-top:           0 !default;
 
 /// @prop - Padding end of the card title
-$card-md-title-padding-end:           0 !default;
+$card-md-title-padding-end:           $card-md-title-padding-top !default;
 
 /// @prop - Padding bottom of the card title
-$card-md-title-padding-bottom:        8px !default;
+$card-md-title-padding-bottom:        $card-md-title-padding-top !default;
 
 /// @prop - Padding start of the card title
-$card-md-title-padding-start:         0 !default;
+$card-md-title-padding-start:         $card-md-title-padding-end !default;
 
 /// @prop - Margin top of the card title
-$card-md-title-margin-top:            2px !default;
+$card-md-title-margin-top:            0 !default;
 
 /// @prop - Margin end of the card title
-$card-md-title-margin-end:            0 !default;
+$card-md-title-margin-end:            $card-md-title-margin-top !default;
 
 /// @prop - Margin bottom of the card title
-$card-md-title-margin-bottom:         2px !default;
+$card-md-title-margin-bottom:         $card-md-title-margin-top !default;
 
 /// @prop - Margin start of the card title
 $card-md-title-margin-start:          $card-md-title-margin-end !default;
diff --git a/packages/core/src/components/card-title/card-title.scss b/packages/core/src/components/card-title/card-title.scss
index beb5dbbd0c..181be5fb01 100644
--- a/packages/core/src/components/card-title/card-title.scss
+++ b/packages/core/src/components/card-title/card-title.scss
@@ -6,4 +6,6 @@
 
 ion-card-title {
   display: block;
+
+  position: relative;
 }
diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx
index 5e62123e37..ea7f1f931d 100644
--- a/packages/core/src/components/card-title/card-title.tsx
+++ b/packages/core/src/components/card-title/card-title.tsx
@@ -27,6 +27,13 @@ export class CardTitle {
    */
   @Prop() mode: 'ios' | 'md' | 'wp';
 
+  hostData() {
+    return {
+      'role': 'heading',
+      'aria-level': '2'
+    };
+  }
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/card/card.ios.scss b/packages/core/src/components/card/card.ios.scss
index 421459d148..936916a423 100755
--- a/packages/core/src/components/card/card.ios.scss
+++ b/packages/core/src/components/card/card.ios.scss
@@ -6,16 +6,16 @@
 // --------------------------------------------------
 
 /// @prop - Margin top of the card
-$card-ios-margin-top:                  12px !default;
+$card-ios-margin-top:                  30px !default;
 
 /// @prop - Margin end of the card
-$card-ios-margin-end:                  12px !default;
+$card-ios-margin-end:                  20px !default;
 
 /// @prop - Margin bottom of the card
-$card-ios-margin-bottom:               12px !default;
+$card-ios-margin-bottom:               30px !default;
 
 /// @prop - Margin start of the card
-$card-ios-margin-start:                12px !default;
+$card-ios-margin-start:                20px !default;
 
 /// @prop - Padding top of the media on the card
 $card-ios-padding-media-top:           10px !default;
@@ -27,13 +27,13 @@ $card-ios-padding-media-bottom:        9px !default;
 $card-ios-background-color:            $list-ios-background-color !default;
 
 /// @prop - Box shadow color of the card
-$card-ios-box-shadow-color:            rgba(0, 0, 0, .3) !default;
+$card-ios-box-shadow-color:            rgba(0, 0, 0, .18) !default;
 
 /// @prop - Box shadow of the card
-$card-ios-box-shadow:                  0 1px 2px $card-ios-box-shadow-color !default;
+$card-ios-box-shadow:                  0 16px 42px $card-ios-box-shadow-color !default;
 
 /// @prop - Border radius of the card
-$card-ios-border-radius:               2px !default;
+$card-ios-border-radius:               14px !default;
 
 /// @prop - Font size of the card
 $card-ios-font-size:                   1.4rem !default;
diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss
index 90c59399bb..bade41dd71 100755
--- a/packages/core/src/components/card/card.scss
+++ b/packages/core/src/components/card/card.scss
@@ -6,6 +6,7 @@
 
 ion-card {
   display: block;
+  position: relative;
   overflow: hidden;
 }
 
diff --git a/packages/core/src/components/card/test/basic.html b/packages/core/src/components/card/test/basic.html
new file mode 100644
index 0000000000..9e5f4ea363
--- /dev/null
+++ b/packages/core/src/components/card/test/basic.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Cards</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-content>
+        <!-- <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-card>
+          <ion-card-header>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+            <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </div>
+
+          <ion-card-header>
+            <ion-card-subtitle>
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title>
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card style="color: white">
+          <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+            <img src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </div>
+
+          <ion-card-header style="background-color: rgba(255, 255, 255, 0.4)">
+            <ion-card-subtitle color="light">
+              Subtitle
+            </ion-card-subtitle>
+            <ion-card-title color="light">
+              Title
+            </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-content>
+            <ion-card-title>
+              Card Title Goes Here
+            </ion-card-title>
+            <p>
+              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
+            </p>
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-right>
+                <ion-button clear small class="activated">
+                  <ion-icon slot="start" name="share"></ion-icon>
+                  Activated
+                </ion-button>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+        </ion-card>
+
+        <ion-card class="cards-list-demo">
+          <ion-card-header>
+            Explore Nearby
+          </ion-card-header>
+
+          <ion-list>
+            <ion-item>
+              <ion-icon name='cart' item-start></ion-icon>
+              Shopping
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='medical' item-start></ion-icon>
+              Hospital
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='cafe' item-start></ion-icon>
+              Cafe
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='paw' item-start></ion-icon>
+              Dog Park
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='beer' item-start></ion-icon>
+              Pub
+            </ion-item>
+
+            <ion-item>
+              <ion-icon name='planet' item-start></ion-icon>
+              Space
+            </ion-item>
+
+          </ion-list>
+        </ion-card>
+
+        <ion-card>
+
+          <ion-item>
+            <ion-avatar item-start>
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+            </ion-avatar>
+            <h2>Card With An Inset Picture</h2>
+            <p>Isn't it beautiful</p>
+          </ion-item>
+
+          <div>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </div>
+
+          <ion-card-content>
+            <p>Hello. I am a paragraph.</p>
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Favorite
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-center>
+                <ion-button clear small>
+                  <ion-icon slot="start" name="musical-notes"></ion-icon>
+                  Listen
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding align-self-center padding-right text-right>
+                <ion-note>
+                  11h ago
+                </ion-note>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </ion-card>
+
+        <ion-card no-margin>
+
+          <div>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </div>
+
+          <ion-card-content>
+            ion-card[no-margin] This card was breaking the border radius.
+          </ion-card-content>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col no-padding>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Favorite
+                </ion-button>
+              </ion-col>
+
+              <ion-col no-padding text-center>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="musical-notes"></ion-icon>
+                  Listen
+                </ion-button>
+              </ion-col>
+              <ion-col no-padding text-right>
+                <ion-button clear small dark>
+                  <ion-icon slot="start" name="share-alt"></ion-icon>
+                  Share
+                </ion-button>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+        </ion-card>
+      </ion-content>
+    </ion-page>
+  </ion-app>
+</body>
+
+</html>