diff --git a/scss/_card.scss b/scss/_card.scss
index 630447ff9b..57543d9f62 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -93,27 +93,21 @@
 //
 
 .card-primary {
-  background-color: $brand-primary;
-  border-color: $brand-primary;
+  @include card-variant($brand-primary);
 }
 .card-success {
-  background-color: $brand-success;
-  border-color: $brand-success;
+  @include card-variant($brand-success);
 }
 .card-info {
-  background-color: $brand-info;
-  border-color: $brand-info;
+  @include card-variant($brand-info);
 }
 .card-warning {
-  background-color: $brand-warning;
-  border-color: $brand-warning;
+  @include card-variant($brand-warning);
 }
 .card-danger {
-  background-color: $brand-danger;
-  border-color: $brand-danger;
+  @include card-variant($brand-danger);
 }
 
-
 //
 // Inverse text within a card for use with dark backgrounds
 //
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9378ff785e..934769fdcd 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -32,6 +32,7 @@
 // // Components
 @import "mixins/alert";
 @import "mixins/buttons";
+@import "mixins/cards";
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
new file mode 100644
index 0000000000..9541c67d4c
--- /dev/null
+++ b/scss/mixins/_cards.scss
@@ -0,0 +1,6 @@
+// Card variants
+
+@mixin card-variant($color) {
+  background-color: $color;
+  border-color: $color;
+}