diff --git a/src/components/card-content/card-content.scss b/src/components/card-content/card-content.scss
index cab24efa64..2353c1395f 100644
--- a/src/components/card-content/card-content.scss
+++ b/src/components/card-content/card-content.scss
@@ -8,6 +8,6 @@ ion-card-content {
   display: block;
 }
 
-ion-card-content.upgraded {
+ion-card-content.hydrated {
   visibility: inherit;
 }
diff --git a/src/components/card-header/card-header.scss b/src/components/card-header/card-header.scss
index 6345cb5b2e..0f31fe31a2 100644
--- a/src/components/card-header/card-header.scss
+++ b/src/components/card-header/card-header.scss
@@ -13,6 +13,6 @@ ion-card-header {
   white-space: nowrap;
 }
 
-ion-card-header.upgraded {
+ion-card-header.hydrated {
   visibility: inherit;
 }
diff --git a/src/components/card-title/card-title.scss b/src/components/card-title/card-title.scss
index 9becb584ef..f1150c68f3 100644
--- a/src/components/card-title/card-title.scss
+++ b/src/components/card-title/card-title.scss
@@ -8,6 +8,6 @@ ion-card-title {
   display: block;
 }
 
-ion-card-header.upgraded {
+ion-card-header.hydrated {
   visibility: inherit;
 }
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
index f7248c6633..17fecbf3bf 100755
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -8,15 +8,16 @@
 /// @prop - Margin top of the card
 $card-ios-margin-top:                  12px !default;
 
-/// @prop - Margin right of the card
+// deprecated
 $card-ios-margin-right:                12px !default;
+/// @prop - Margin end of the card
+$card-ios-margin-end:                  $card-ios-margin-right !default;
 
 /// @prop - Margin bottom of the card
 $card-ios-margin-bottom:               12px !default;
 
-/// @prop - Margin left of the card
+// deprecated
 $card-ios-margin-left:                 12px !default;
-
 /// @prop - Margin start of the card
 $card-ios-margin-start:                $card-ios-margin-left;
 
@@ -46,11 +47,11 @@ $card-ios-text-color:                  #666 !default;
 
 
 .card-ios {
-  margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
+  @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);
 
-  width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)});
+  width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
 
-  border-radius: $card-ios-border-radius;
   font-size: $card-ios-font-size;
 
   background: $card-ios-background-color;
@@ -76,14 +77,14 @@ $card-ios-text-color:                  #666 !default;
 }
 
 .card-ios h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 2.4rem;
   font-weight: normal;
 }
 
 .card-ios h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.6rem;
   font-weight: normal;
@@ -93,14 +94,14 @@ $card-ios-text-color:                  #666 !default;
 .card-ios h4,
 .card-ios h5,
 .card-ios h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.4rem;
   font-weight: normal;
 }
 
 .card-ios p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 1.4rem;
   color: $card-ios-text-color;
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
index 166bf51c2c..64f6e7e975 100755
--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -8,15 +8,16 @@
 /// @prop - Margin top of the card
 $card-md-margin-top:                  10px !default;
 
-/// @prop - Margin right of the card
+// deprecated
 $card-md-margin-right:                10px !default;
+/// @prop - Margin end of the card
+$card-md-margin-end:                  $card-md-margin-right !default;
 
 /// @prop - Margin bottom of the card
 $card-md-margin-bottom:               10px !default;
 
-/// @prop - Margin left of the card
+// deprecated
 $card-md-margin-left:                 10px !default;
-
 /// @prop - Margin start of the card
 $card-md-margin-start:                $card-md-margin-left;
 
@@ -52,11 +53,11 @@ $card-md-text-color:                  #222 !default;
 
 
 .card-md {
-  margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
+  @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);
 
-  width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)});
+  width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
 
-  border-radius: $card-md-border-radius;
   font-size: $card-md-font-size;
 
   background: $card-md-background-color;
@@ -87,7 +88,7 @@ $card-md-text-color:                  #222 !default;
 }
 
 .card-md h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 2.4rem;
   font-weight: normal;
@@ -95,7 +96,7 @@ $card-md-text-color:                  #222 !default;
 }
 
 .card-md h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.6rem;
   font-weight: normal;
@@ -106,7 +107,7 @@ $card-md-text-color:                  #222 !default;
 .card-md h4,
 .card-md h5,
 .card-md h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.4rem;
   font-weight: normal;
@@ -114,7 +115,7 @@ $card-md-text-color:                  #222 !default;
 }
 
 .card-md p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 1.4rem;
   font-weight: normal;
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 12ad4eab2e..3a49510cb2 100755
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -9,7 +9,7 @@ ion-card {
   overflow: hidden;
 }
 
-ion-card.upgraded {
+ion-card.hydrated {
   visibility: inherit;
 }
 
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
index d007a5f92c..3bc61345ee 100755
--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@@ -8,15 +8,16 @@
 /// @prop - Margin top of the card
 $card-wp-margin-top:                  8px !default;
 
-/// @prop - Margin right of the card
+// deprecated
 $card-wp-margin-right:                8px !default;
+/// @prop - Margin end of the card
+$card-wp-margin-end:                  $card-wp-margin-right !default;
 
 /// @prop - Margin bottom of the card
 $card-wp-margin-bottom:               8px !default;
 
-/// @prop - Margin left of the card
+// deprecated
 $card-wp-margin-left:                 8px !default;
-
 /// @prop - Margin start of the card
 $card-wp-margin-start:                $card-wp-margin-left;
 
@@ -55,11 +56,11 @@ $card-wp-text-color:                  #222 !default;
 
 
 .card-wp {
-  margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
+  @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start);
+  @include border-radius($card-wp-border-radius);
 
-  width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)});
+  width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
 
-  border-radius: $card-wp-border-radius;
   font-size: $card-wp-font-size;
 
   background: $card-wp-background-color;
@@ -90,7 +91,7 @@ $card-wp-text-color:                  #222 !default;
 }
 
 .card-wp h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 2.4rem;
   font-weight: normal;
@@ -98,7 +99,7 @@ $card-wp-text-color:                  #222 !default;
 }
 
 .card-wp h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.6rem;
   font-weight: normal;
@@ -109,7 +110,7 @@ $card-wp-text-color:                  #222 !default;
 .card-wp h4,
 .card-wp h5,
 .card-wp h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);
 
   font-size: 1.4rem;
   font-weight: normal;
@@ -117,7 +118,7 @@ $card-wp-text-color:                  #222 !default;
 }
 
 .card-wp p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);
 
   font-size: 1.4rem;
   font-weight: normal;