ion-card-header

ionic/components/app/test/material/index.ts

@@ -31,9 +31,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 
     <div class="padding">
       <ion-card>
-        <ion-header>
+        <ion-card-header>
           New Post
-        </ion-header>
+        </ion-card-header>
         <div class="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.
         </div>

ionic/components/app/test/sink/pages/card.ts

@@ -20,9 +20,9 @@ import {SinkPage} from '../sink-page';
 
     <ion-card>
 
-      <ion-header>
+      <ion-card-header>
         Card Header
-      </ion-header>
+      </ion-card-header>
 
       <div class="item">
         <div class="item-media">

ionic/components/card/card.scss

@@ -11,3 +11,10 @@
   }
 
 }
+
+ion-card-header {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

ionic/components/card/modes/ios.scss

@@ -18,7 +18,9 @@ $card-ios-title-padding:               8px 0 8px 0;
 $card-ios-title-text-color:            #222 !default;
 
 $card-ios-header-font-size:            1.6rem !default;
+$card-ios-header-font-weight:          500 !default;
 $card-ios-header-padding:              16px !default;
+$card-ios-header-color:                #333 !default;
 
 
 .card.list[mode=ios] {
@@ -48,11 +50,11 @@ $card-ios-header-padding:              16px !default;
     left: 0;
   }
 
-  ion-header {
-    font-size: $card-ios-header-font-size;
-    text-transform: none;
-    letter-spacing: normal;
+  ion-card-header {
     padding: $card-ios-header-padding;
+    font-size: $card-ios-header-font-size;
+    font-weight: $card-ios-header-font-weight;
+    color: $card-ios-header-color;
   }
 
   .card-title {

ionic/components/card/modes/material.scss

@@ -18,6 +18,8 @@ $card-md-title-padding:               8px 0 8px 0;
 $card-md-title-text-color:            #222 !default;
 
 $card-md-header-font-size:            1.6rem !default;
+$card-md-header-padding:              16px !default;
+$card-md-header-color:                #222 !default;
 
 
 .card.list[mode=md] {
@@ -55,9 +57,10 @@ $card-md-header-font-size:            1.6rem !default;
     margin-left: 0;
   }
 
-  ion-header {
+  ion-card-header {
+    padding: $card-md-header-padding;
     font-size: $card-md-header-font-size;
-    color: $card-md-text-color;
+    color: $card-md-header-color;
   }
 
   .card-title {

ionic/components/card/test/basic/main.html

@@ -4,9 +4,9 @@
 
 <ion-card>
 
-  <ion-header>
+  <ion-card-header>
     Card Header
-  </ion-header>
+  </ion-card-header>
 
   <div class="item item-text-wrap">
     <ion-item-content>

ionic/components/card/test/links/main.html

@@ -41,9 +41,9 @@
 
 <ion-card>
 
-  <ion-header>
+  <ion-card-header>
     Card Header
-  </ion-header>
+  </ion-card-header>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>

ionic/components/item/test/buttons/main.html

@@ -3,44 +3,44 @@
 <ion-list>
 
   <a ion-item href="#">
-    a.item
+    a[ion-item]
     <icon forward item-right></icon>
   </a>
 
   <a ion-item class="activated" href="#">
-    a.item.activated
+    a[ion-item].activated
     <icon forward item-right></icon>
   </a>
 
   <button ion-item>
-    button.item
+    button[ion-item]
     <icon forward item-right></icon>
   </button>
 
   <button ion-item class="activated">
-    button.item.activated
+    button[ion-item].activated
     <icon forward item-right></icon>
   </button>
 
   <ion-item>
     <button item-left>Edit</button>
-    div.item left button
+    ion-item left button
   </ion-item>
 
   <ion-item>
-    div.item right button[outline][secondary]
+    ion-item right button[outline][secondary]
     <button secondary outline item-right>Open</button>
   </ion-item>
 
   <ion-item>
-    div.item icon only button
+    ion-item icon only button
     <button item-right>
       <icon name="ion-help-circled"></icon>
     </button>
   </ion-item>
 
   <ion-item>
-    div.item right icon/text button
+    ion-item right icon/text button
     <button item-right>
       <icon name="ion-refresh"></icon>
       Refresh
@@ -52,11 +52,11 @@
       <icon name="ion-wrench"></icon>
       Fix
     </button>
-    div.item left clear button
+    ion-item left clear button
   </ion-item>
 
   <ion-item>
-    div.item right clear button
+    ion-item right clear button
     <button secondary clear item-right>
       Edit
     </button>

ionic/components/item/test/icons/main.html

@@ -3,48 +3,48 @@
 <ion-list>
 
   <ion-item>
-    Div with forward icon
+    ion-item forward icon
     <icon forward item-right></icon>
   </ion-item>
 
   <a ion-item href="#">
-    Link with forward icon
+    a[ion-item] with forward icon
     <icon forward item-right></icon>
   </a>
 
   <button ion-item>
-    Button with forward icon
+    button[ion-item] with forward icon
     <icon forward item-right></icon>
   </button>
 
   <a ion-item href="#">
-    Link with right side default icon
+    a[ion-item] with right side default icon
     <icon name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    Link with right side large icon
+    a[ion-item] with right side large icon
     <icon large name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <a ion-item href="#">
-    Link with right side small icon
+    a[ion-item] with right side small icon
     <icon small name="ion-ios-information-outline" item-right></icon>
   </a>
 
   <button ion-item>
     <icon name="ion-star" item-left></icon>
-    Button with left side icon
+    button[ion-item] with left side icon
   </button>
 
   <button ion-item>
     <icon name="ion-flag" item-left></icon>
-    Button with both side icons
+    button[ion-item] with both side icons
     <icon name="ion-ios-checkmark" item-right></icon>
   </button>
 
   <a ion-item href="#">
-    Link with two right side icons
+    a[ion-item] with two right side icons
     <icon name="ion-checkmark-circled" item-right></icon>
     <icon name="ion-shuffle" item-right></icon>
   </a>
@@ -52,7 +52,7 @@
   <button ion-item>
     <icon name="ion-clipboard" item-left></icon>
     <icon name="ion-minus-circled" item-left></icon>
-    Button with two left side icons
+    button[ion-item] with two left side icons
   </button>
 
   <button ion-item>

ionic/components/list/modes/ios.scss

@@ -37,7 +37,7 @@ $list-ios-header-color:               #333 !default;
   margin-top: $list-ios-margin-top;
 }
 
-.list[mode=ios] + .list:not(.card) ion-header {
+.list[mode=ios] + .list ion-header {
   margin-top: -$list-ios-margin-top;
   padding-top: 0;
 }

ionic/components/list/modes/material.scss

@@ -32,7 +32,7 @@ $list-md-header-color:           #858585 !default;
   margin-top: $list-md-margin-top;
 }
 
-.list[mode=md] + .list:not(.card) ion-header {
+.list[mode=md] + .list ion-header {
   margin-top: -$list-md-margin-top;
   padding-top: 0;
 }