diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss
index 64151b7260..9ee5e65227 100755
--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-ios-background};
-  --color: #{$card-ios-text-color};
+  --background: #{$card-ios-background};
+  --color: #{$card-ios-color};
 
   @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
   @include border-radius($card-ios-border-radius);
@@ -22,4 +22,4 @@
 
 :host(.ion-activated) {
   transform: #{$card-ios-transform-activated};
-}
\ No newline at end of file
+}
diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss
index 9fc5f3b07e..24134b8d8b 100755
--- a/core/src/components/card/card.ios.vars.scss
+++ b/core/src/components/card/card.ios.vars.scss
@@ -15,9 +15,6 @@ $card-ios-margin-bottom:               $card-ios-margin-top !default;
 /// @prop - Margin start of the card
 $card-ios-margin-start:                16px !default;
 
-/// @prop - Background color of the card
-$card-ios-background-color:            $item-ios-background !default;
-
 /// @prop - Box shadow color of the card
 $card-ios-box-shadow-color:            rgba(0, 0, 0, .12) !default;
 
@@ -30,11 +27,8 @@ $card-ios-border-radius:               8px !default;
 /// @prop - Font size of the card
 $card-ios-font-size:                   14px !default;
 
-/// @prop - Color of the card text
-$card-ios-text-color:                  $text-color-step-400 !default;
-
 /// @prop - Transition timing function of the card
 $card-ios-transition-timing-function:  cubic-bezier(0.12, 0.72, 0.29, 1) !default;
 
 /// @prop - Transform of the card on activate
-$card-ios-transform-activated:         scale3d(.97, .97, 1) !default;
\ No newline at end of file
+$card-ios-transform-activated:         scale3d(.97, .97, 1) !default;
diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss
index 0258feb280..1c74a42acd 100755
--- a/core/src/components/card/card.md.scss
+++ b/core/src/components/card/card.md.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-md-background};
-  --color: #{$card-md-text-color};
+  --background: #{$card-md-background};
+  --color: #{$card-md-color};
 
   @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
   @include border-radius($card-md-border-radius);
diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss
index 8adb3f0514..9583485d96 100755
--- a/core/src/components/card/card.md.vars.scss
+++ b/core/src/components/card/card.md.vars.scss
@@ -15,9 +15,6 @@ $card-md-margin-bottom:               10px !default;
 /// @prop - Margin start of the card
 $card-md-margin-start:                10px !default;
 
-/// @prop - Background color of the card
-$card-md-background-color:            $item-md-background !default;
-
 /// @prop - Box shadow of the card
 $card-md-box-shadow:                  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
@@ -29,6 +26,3 @@ $card-md-font-size:                   14px !default;
 
 /// @prop - Line height of the card
 $card-md-line-height:                 1.5 !default;
-
-/// @prop - Color of the card text
-$card-md-text-color:                  $text-color-step-450 !default;
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index 54b0dde362..b66449a871 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -29,4 +29,9 @@ $toolbar-ios-color:                         var(--ion-toolbar-color, $text-color
 // --------------------------------------------------
 $item-ios-background:                       var(--ion-item-background, $background-color) !default;
 $item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
-$item-ios-color:                            var(--ion-item-color, $text-color) !default;
\ No newline at end of file
+$item-ios-color:                            var(--ion-item-color, $text-color) !default;
+
+// iOS Card
+// --------------------------------------------------
+$card-ios-background:                        var(--ion-card-background, $item-ios-background) !default;
+$card-ios-color:                             var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default;
diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss
index e708be279f..c0012354cc 100644
--- a/core/src/themes/ionic.theme.default.md.scss
+++ b/core/src/themes/ionic.theme.default.md.scss
@@ -31,3 +31,8 @@ $toolbar-md-color:                          var(--ion-toolbar-color, var(--ion-t
 $item-md-background:                        var(--ion-item-background, $background-color) !default;
 $item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
 $item-md-color:                             var(--ion-item-color, $text-color) !default;
+
+// Material Design Card
+// --------------------------------------------------
+$card-md-background:                        var(--ion-card-background, $item-md-background) !default;
+$card-md-color:                             var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default;