diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
index 2d70300e8..f10a3831b 100644
--- a/pages/_docs/cards.md
+++ b/pages/_docs/cards.md
@@ -62,11 +62,14 @@ You can also add the image on the left side of the card. All you need do to is:
 
 {% example html columns=2 %}
 <div class="row row-cards row-deck">
-    <div class="col-md-6">
-        {% include cards/card.html title="Card status" hide-options=true status="purple" %}
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
     </div>
-    <div class="col-md-6">
-        {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
+    </div>
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
     </div>
 </div>
 {% endexample %}
diff --git a/pages/_includes/cards/card.html b/pages/_includes/cards/card.html
index b4bc2e981..63d3780c3 100644
--- a/pages/_includes/cards/card.html
+++ b/pages/_includes/cards/card.html
@@ -1,6 +1,6 @@
 <div class="card{% if include.collapsed %} card-collapsed{% endif %}">
-	{% if include.status or include.status-left %}
-	<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
+	{% if include.status-position %}
+	<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
 	{% endif %}
 
    {% unless include.hide-header %}
diff --git a/pages/buttons.html b/pages/buttons.html
index a82a954a2..003f259b1 100644
--- a/pages/buttons.html
+++ b/pages/buttons.html
@@ -1,5 +1,6 @@
 ---
 title: Buttons
+done: true
 ---
 
 <p>
diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index 4058be870..7053b44dc 100644
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -18,3 +18,15 @@
     }
   }
 }
+
+.row-deck {
+  > .col,
+  > [class*='col-'] {
+    display: flex;
+    align-items: stretch;
+
+    .card {
+      flex: 1 1 auto;
+    }
+  }
+}
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index cc1c38229..f8dbbf680 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -133,12 +133,30 @@ Card optinos
 /**
 Card status
  */
-.card-status {
-  height: 2px;
+.card-status-top {
+  position: absolute;
+  height: 3px;
   border-radius: $card-border-radius $card-border-radius 0 0;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.card-status-left {
+  position: absolute;
+  right: auto;
+  bottom: 0;
+  height: 100%;
+  width: 3px;
+  border-radius: $card-border-radius 0 0 $card-border-radius;
 }
 
 .card-status-bottom {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  top: initial;
+  height: 3px;
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 
diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss
index 78b0b581a..fbcc1cce6 100644
--- a/scss/ui/_icons.scss
+++ b/scss/ui/_icons.scss
@@ -1,6 +1,10 @@
 .icon {
   font-size: 1em;
   vertical-align: -.1em;
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .icon-md {