feat(card): update card

src/components/card-content/card-content.ios.scss

@@ -0,0 +1,53 @@
+@import "../../themes/ionic.globals.ios";
+@import "./card-content";
+
+
+// iOS Card Header
+// --------------------------------------------------
+
+/// @prop - Font size of the card
+$card-ios-font-size:                   1.4rem !default;
+
+/// @prop - Padding top of the card
+$card-ios-padding-top:                 13px !default;
+
+/// @prop - Padding right of the card
+$card-ios-padding-right:               16px !default;
+
+/// @prop - Padding bottom of the card
+$card-ios-padding-bottom:              14px !default;
+
+/// @prop - Padding left of the card
+$card-ios-padding-left:                16px !default;
+
+
+.card-content-ios {
+  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
+
+  font-size: $card-ios-font-size;
+  line-height: 1.4;
+}
+
+
+// Generate iOS Card Content Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .card-ios-#{$color-name} {
+    .card-content-ios {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+      .card-content-ios-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-content-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-content/card-content.md.scss

@@ -0,0 +1,57 @@
+@import "../../themes/ionic.globals.md";
+@import "./card-content";
+
+
+// Material Design Card Content
+// --------------------------------------------------
+
+/// @prop - Padding top of the card
+$card-md-padding-top:                 13px !default;
+
+/// @prop - Padding right of the card
+$card-md-padding-right:               16px !default;
+
+/// @prop - Padding bottom of the card
+$card-md-padding-bottom:              13px !default;
+
+/// @prop - Padding left of the card
+$card-md-padding-left:                16px !default;
+
+/// @prop - Font size of the card
+$card-md-font-size:                   1.4rem !default;
+
+/// @prop - Line height of the card
+$card-md-line-height:                 1.5 !default;
+
+
+.card-content-md {
+  padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
+
+  font-size: $card-md-font-size;
+  line-height: $card-md-line-height;
+}
+
+
+// Generate Material Design Card Content Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .card-md-#{$color-name} {
+
+    .card-content-md {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      .card-content-md-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-content-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-content/card-content.scss

@@ -1,7 +1,7 @@
 @import "../../themes/ionic.globals";
 
 
-// Card
+// Card Content
 // --------------------------------------------------
 
 ion-card-content,

src/components/card-content/card-content.wp.scss

@@ -0,0 +1,57 @@
+@import "../../themes/ionic.globals.wp";
+@import "./card-content";
+
+
+// Windows Card Content
+// --------------------------------------------------
+
+/// @prop - Padding top of the card
+$card-wp-padding-top:                 13px !default;
+
+/// @prop - Padding right of the card
+$card-wp-padding-right:               16px !default;
+
+/// @prop - Padding bottom of the card
+$card-wp-padding-bottom:              13px !default;
+
+/// @prop - Padding left of the card
+$card-wp-padding-left:                16px !default;
+
+/// @prop - Font size of the card
+$card-wp-font-size:                   1.4rem !default;
+
+/// @prop - Line height of the card
+$card-wp-line-height:                 1.5 !default;
+
+
+.card-content-wp {
+  padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
+
+  font-size: $card-wp-font-size;
+  line-height: $card-wp-line-height;
+}
+
+
+// Generate Windows Card Content Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .card-wp-#{$color-name} {
+
+    .card-content-wp {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      .card-content-wp-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-content-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-header/card-header.ios.scss

@@ -0,0 +1,52 @@
+@import "../../themes/ionic.globals.ios";
+@import "./card-header";
+
+
+// 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 of the card header
+$card-ios-header-padding:              16px !default;
+
+/// @prop - Color of the card header
+$card-ios-header-color:                #333 !default;
+
+
+.card-header-ios {
+  padding: $card-ios-header-padding;
+
+  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;
+  }
+
+}

src/components/card-header/card-header.md.scss

@@ -0,0 +1,48 @@
+@import "../../themes/ionic.globals.md";
+@import "./card-header";
+
+
+// Material Design Card Header
+// --------------------------------------------------
+
+/// @prop - Font size of the card header
+$card-md-header-font-size:            1.6rem !default;
+
+/// @prop - Padding of the card header
+$card-md-header-padding:              16px !default;
+
+/// @prop - Color of the card header
+$card-md-header-color:                #222 !default;
+
+
+.card-header-md {
+  padding: $card-md-header-padding;
+
+  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;
+  }
+
+}

src/components/card-header/card-header.wp.scss

@@ -0,0 +1,49 @@
+@import "../../themes/ionic.globals.wp";
+@import "./card-header";
+
+
+// Windows Card Header
+// --------------------------------------------------
+
+/// @prop - Font size of the card header
+$card-wp-header-font-size:            1.6rem !default;
+
+/// @prop - Padding of the card header
+$card-wp-header-padding:              16px !default;
+
+/// @prop - Color of the card header
+$card-wp-header-color:                #222 !default;
+
+
+.card-header-wp {
+  padding: $card-wp-header-padding;
+
+  font-size: $card-wp-header-font-size;
+
+  color: $card-wp-header-color;
+}
+
+
+// Generate Windows Card Header Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .card-wp-#{$color-name} {
+
+    .card-header-wp {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      .card-header-wp-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-header-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-title/card-title.ios.scss

@@ -0,0 +1,55 @@
+@import "../../themes/ionic.globals.ios";
+@import "./card-title";
+
+
+// iOS Card Title
+// --------------------------------------------------
+
+/// @prop - Font size of the card title
+$card-ios-title-font-size:             1.8rem !default;
+
+/// @prop - Padding of the card title
+$card-ios-title-padding:               8px 0 8px 0 !default;
+
+/// @prop - Margin of the card title
+$card-ios-title-margin:                2px 0 2px !default;
+
+/// @prop - Color of the card title
+$card-ios-title-text-color:            #222 !default;
+
+
+.card-title-ios {
+  display: block;
+
+  margin: $card-ios-title-margin;
+  padding: $card-ios-title-padding;
+
+  font-size: $card-ios-title-font-size;
+  line-height: 1.2;
+  color: $card-ios-title-text-color;
+}
+
+
+// Generate iOS Card Title Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .card-ios-#{$color-name} {
+
+    .card-title-ios {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+      .card-title-ios-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-title-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-title/card-title.md.scss

@@ -0,0 +1,55 @@
+@import "../../themes/ionic.globals.md";
+@import "./card-title";
+
+
+// Material Design Card Title
+// --------------------------------------------------
+
+/// @prop - Font size of the card title
+$card-md-title-font-size:             2.4rem !default;
+
+/// @prop - Padding of the card title
+$card-md-title-padding:               8px 0 8px 0 !default;
+
+/// @prop - Margin of the card title
+$card-md-title-margin:                2px 0 2px !default;
+
+/// @prop - Color of the card title
+$card-md-title-text-color:            #222 !default;
+
+
+.card-title-md {
+  display: block;
+
+  margin: $card-md-title-margin;
+  padding: $card-md-title-padding;
+
+  font-size: $card-md-title-font-size;
+  line-height: 1.2;
+  color: $card-md-title-text-color;
+}
+
+
+// Generate Material Design Card Title Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .card-md-#{$color-name} {
+
+    .card-title-md {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      .card-title-md-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-title-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card-title/card-title.scss

@@ -0,0 +1,11 @@
+@import "../../themes/ionic.globals";
+
+
+// Card Title
+// --------------------------------------------------
+
+ion-card-title,
+:host {
+  display: block;
+  visibility: inherit !important;
+}

src/components/card-title/card-title.ts

@@ -4,9 +4,9 @@ import { Component } from '../index';
 @Component({
   tag: 'ion-card-title',
   styleUrls: {
-    ios: 'card.ios.scss',
-    md: 'card.md.scss',
-    wp: 'card.wp.scss'
+    ios: 'card-title.ios.scss',
+    md: 'card-title.md.scss',
+    wp: 'card-title.wp.scss'
   }
 })
 export class CardTitle {}

src/components/card-title/card-title.wp.scss

@@ -0,0 +1,55 @@
+@import "../../themes/ionic.globals.wp";
+@import "./card-title";
+
+
+// Windows Card Title
+// --------------------------------------------------
+
+/// @prop - Font size of card title
+$card-wp-title-font-size:             2.4rem !default;
+
+/// @prop - Padding of the card title
+$card-wp-title-padding:               8px 0 8px 0 !default;
+
+/// @prop - Margin of the card title
+$card-wp-title-margin:                2px 0 !default;
+
+/// @prop - Color of the card title
+$card-wp-title-text-color:            #222 !default;
+
+
+.card-title-wp {
+  display: block;
+
+  margin: $card-wp-title-margin;
+  padding: $card-wp-title-padding;
+
+  font-size: $card-wp-title-font-size;
+  line-height: 1.2;
+  color: $card-wp-title-text-color;
+}
+
+
+// Generate Windows Card Title Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .card-wp-#{$color-name} {
+
+    .card-title-wp {
+      color: $color-contrast;
+    }
+
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+      .card-title-wp-#{$color-name} {
+        color: $color-base;
+      }
+    }
+  }
+
+  .card-title-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}

src/components/card/card-content.ios.scss

@@ -1,3 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-content";
-

src/components/card/card-content.md.scss

@@ -1,3 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-content";
-

src/components/card/card-content.wp.scss

@@ -1,3 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-content";
-

src/components/card/card-header.ios.scss

@@ -1,2 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-header";

src/components/card/card-header.md.scss

@@ -1,2 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-header";

src/components/card/card-header.wp.scss

@@ -1,2 +0,0 @@
-@import "../../themes/ionic.globals";
-@import "./card-header";

src/components/card/card.ios.scss

@@ -17,18 +17,6 @@ $card-ios-margin-bottom:               12px !default;
 /// @prop - Margin left of the card
 $card-ios-margin-left:                 12px !default;
 
-/// @prop - Padding top of the card
-$card-ios-padding-top:                 13px !default;
-
-/// @prop - Padding right of the card
-$card-ios-padding-right:               16px !default;
-
-/// @prop - Padding bottom of the card
-$card-ios-padding-bottom:              14px !default;
-
-/// @prop - Padding left of the card
-$card-ios-padding-left:                16px !default;
-
 /// @prop - Padding top of the media on the card
 $card-ios-padding-media-top:           10px !default;
 
@@ -53,30 +41,6 @@ $card-ios-font-size:                   1.4rem !default;
 /// @prop - Color of the card text
 $card-ios-text-color:                  #666 !default;
 
-/// @prop - Font size of the card title
-$card-ios-title-font-size:             1.8rem !default;
-
-/// @prop - Padding of the card title
-$card-ios-title-padding:               8px 0 8px 0 !default;
-
-/// @prop - Margin of the card title
-$card-ios-title-margin:                2px 0 2px !default;
-
-/// @prop - Color of the card title
-$card-ios-title-text-color:            #222 !default;
-
-/// @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 of the card header
-$card-ios-header-padding:              16px !default;
-
-/// @prop - Color of the card header
-$card-ios-header-color:                #333 !default;
-
 
 .card-ios {
   margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
@@ -104,21 +68,6 @@ $card-ios-header-color:                #333 !default;
   border: 0;
 }
 
-.card-content-ios {
-  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
-
-  font-size: $card-ios-font-size;
-  line-height: 1.4;
-}
-
-.card-header-ios {
-  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-header-ios + .card-content-ios,
 .card-ios .item + .card-content-ios {
   padding-top: 0;
@@ -128,17 +77,6 @@ $card-ios-header-color:                #333 !default;
   font-size: 1.3rem;
 }
 
-.card-title-ios {
-  display: block;
-
-  margin: $card-ios-title-margin;
-  padding: $card-ios-title-padding;
-
-  font-size: $card-ios-title-font-size;
-  line-height: 1.2;
-  color: $card-ios-title-text-color;
-}
-
 .card-ios h1 {
   margin: 0 0 2px;
 
@@ -188,27 +126,15 @@ $card-ios-header-color:                #333 !default;
     color: $color-contrast;
     background-color: $color-base;
 
-    .card-header-ios,
-    .card-title-ios,
-    .card-content-ios,
     p {
       color: $color-contrast;
     }
 
     @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-      .text-ios-#{$color-name},
-      .card-header-ios-#{$color-name},
-      .card-title-ios-#{$color-name},
-      .card-content-ios-#{$color-name} {
+      .text-ios-#{$color-name} {
         color: $color-base;
       }
     }
   }
 
-  .card-header-ios-#{$color-name},
-  .card-title-ios-#{$color-name},
-  .card-content-ios-#{$color-name} {
-    color: $color-base;
-  }
-
 }

src/components/card/card.md.scss

@@ -17,19 +17,6 @@ $card-md-margin-bottom:               10px !default;
 /// @prop - Margin left of the card
 $card-md-margin-left:                 10px !default;
 
-
-/// @prop - Padding top of the card
-$card-md-padding-top:                 13px !default;
-
-/// @prop - Padding right of the card
-$card-md-padding-right:               16px !default;
-
-/// @prop - Padding bottom of the card
-$card-md-padding-bottom:              13px !default;
-
-/// @prop - Padding left of the card
-$card-md-padding-left:                16px !default;
-
 /// @prop - Padding top of the media on the card
 $card-md-padding-media-top:           10px !default;
 
@@ -51,7 +38,6 @@ $card-md-box-shadow:                  0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px
 /// @prop - Border radius of the card
 $card-md-border-radius:               2px !default;
 
-
 /// @prop - Font size of the card
 $card-md-font-size:                   1.4rem !default;
 
@@ -61,27 +47,6 @@ $card-md-line-height:                 1.5 !default;
 /// @prop - Color of the card text
 $card-md-text-color:                  #222 !default;
 
-/// @prop - Font size of the card title
-$card-md-title-font-size:             2.4rem !default;
-
-/// @prop - Padding of the card title
-$card-md-title-padding:               8px 0 8px 0 !default;
-
-/// @prop - Margin of the card title
-$card-md-title-margin:                2px 0 2px !default;
-
-/// @prop - Color of the card title
-$card-md-title-text-color:            #222 !default;
-
-/// @prop - Font size of the card header
-$card-md-header-font-size:            1.6rem !default;
-
-/// @prop - Padding of the card header
-$card-md-header-padding:              16px !default;
-
-/// @prop - Color of the card header
-$card-md-header-color:                #222 !default;
-
 
 .card-md {
   margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
@@ -109,20 +74,6 @@ $card-md-header-color:                #222 !default;
   border: 0;
 }
 
-.card-content-md {
-  padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
-
-  font-size: $card-md-font-size;
-  line-height: $card-md-line-height;
-}
-
-.card-header-md {
-  padding: $card-md-header-padding;
-
-  font-size: $card-md-header-font-size;
-  color: $card-md-header-color;
-}
-
 .card-header-md + .card-content-md,
 .card-md .item + .card-content-md {
   padding-top: 0;
@@ -132,17 +83,6 @@ $card-md-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-title-md {
-  display: block;
-
-  margin: $card-md-title-margin;
-  padding: $card-md-title-padding;
-
-  font-size: $card-md-title-font-size;
-  line-height: 1.2;
-  color: $card-md-title-text-color;
-}
-
 .card-md h1 {
   margin: 0 0 2px;
 
@@ -197,9 +137,6 @@ $card-md-header-color:                #222 !default;
     color: $color-contrast;
     background-color: $color-base;
 
-    .card-header-md,
-    .card-title-md,
-    .card-content-md,
     h1,
     h2,
     h3,
@@ -211,19 +148,10 @@ $card-md-header-color:                #222 !default;
     }
 
     @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-      .text-md-#{$color-name},
-      .card-header-md-#{$color-name},
-      .card-title-md-#{$color-name},
-      .card-content-md-#{$color-name} {
+      .text-md-#{$color-name} {
         color: $color-base;
       }
     }
   }
 
-  .card-header-md-#{$color-name},
-  .card-title-md-#{$color-name},
-  .card-content-md-#{$color-name} {
-    color: $color-base;
-  }
-
 }

src/components/card/card.scss

@@ -1,6 +1,5 @@
 @import "../../themes/ionic.globals";
 
-
 // Card
 // --------------------------------------------------
 
@@ -12,8 +11,7 @@ ion-card,
   visibility: inherit !important;
 }
 
-ion-card img,
-:host img {
+ion-card img {
   display: block;
 
   width: 100%;

src/components/card/card.wp.scss

@@ -17,18 +17,6 @@ $card-wp-margin-bottom:               8px !default;
 /// @prop - Margin left of the card
 $card-wp-margin-left:                 8px !default;
 
-/// @prop - Padding top of the card
-$card-wp-padding-top:                 13px !default;
-
-/// @prop - Padding right of the card
-$card-wp-padding-right:               16px !default;
-
-/// @prop - Padding bottom of the card
-$card-wp-padding-bottom:              13px !default;
-
-/// @prop - Padding left of the card
-$card-wp-padding-left:                16px !default;
-
 /// @prop - Padding top of the media on the card
 $card-wp-padding-media-top:           10px !default;
 
@@ -62,27 +50,6 @@ $card-wp-line-height:                 1.5 !default;
 /// @prop - Color of the card text
 $card-wp-text-color:                  #222 !default;
 
-/// @prop - Font size of card title
-$card-wp-title-font-size:             2.4rem !default;
-
-/// @prop - Padding of the card title
-$card-wp-title-padding:               8px 0 8px 0 !default;
-
-/// @prop - Margin of the card title
-$card-wp-title-margin:                2px 0 !default;
-
-/// @prop - Color of the card title
-$card-wp-title-text-color:            #222 !default;
-
-/// @prop - Font size of the card header
-$card-wp-header-font-size:            1.6rem !default;
-
-/// @prop - Padding of the card header
-$card-wp-header-padding:              16px !default;
-
-/// @prop - Color of the card header
-$card-wp-header-color:                #222 !default;
-
 
 .card-wp {
   margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
@@ -110,21 +77,6 @@ $card-wp-header-color:                #222 !default;
   border: 0;
 }
 
-.card-content-wp {
-  padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
-
-  font-size: $card-wp-font-size;
-  line-height: $card-wp-line-height;
-}
-
-.card-header-wp {
-  padding: $card-wp-header-padding;
-
-  font-size: $card-wp-header-font-size;
-
-  color: $card-wp-header-color;
-}
-
 .card-header-wp + .card-content-wp,
 .card-wp .item + .card-content-wp {
   padding-top: 0;
@@ -134,17 +86,6 @@ $card-wp-header-color:                #222 !default;
   font-size: 1.3rem;
 }
 
-.card-title-wp {
-  display: block;
-
-  margin: $card-wp-title-margin;
-  padding: $card-wp-title-padding;
-
-  font-size: $card-wp-title-font-size;
-  line-height: 1.2;
-  color: $card-wp-title-text-color;
-}
-
 .card-wp h1 {
   margin: 0 0 2px;
 
@@ -199,9 +140,6 @@ $card-wp-header-color:                #222 !default;
     color: $color-contrast;
     background-color: $color-base;
 
-    .card-header-wp,
-    .card-title-wp,
-    .card-content-wp,
     h1,
     h2,
     h3,
@@ -213,19 +151,10 @@ $card-wp-header-color:                #222 !default;
     }
 
     @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
-      .text-wp-#{$color-name},
-      .card-header-wp-#{$color-name},
-      .card-title-wp-#{$color-name},
-      .card-content-wp-#{$color-name} {
+      .text-wp-#{$color-name} {
         color: $color-base;
       }
     }
   }
 
-  .card-header-wp-#{$color-name},
-  .card-title-wp-#{$color-name},
-  .card-content-wp-#{$color-name} {
-    color: $color-base;
-  }
-
 }