card with status, row-deck

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 %}

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 %}

pages/buttons.html

@@ -1,5 +1,6 @@
 ---
 title: Buttons
+done: true
 ---
 
 <p>

scss/layout/_grid.scss

@@ -18,3 +18,15 @@
     }
   }
 }
+
+.row-deck {
+  > .col,
+  > [class*='col-'] {
+    display: flex;
+    align-items: stretch;
+
+    .card {
+      flex: 1 1 auto;
+    }
+  }
+}

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;
 }
 

scss/ui/_icons.scss

@@ -1,6 +1,10 @@
 .icon {
   font-size: 1em;
   vertical-align: -.1em;
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .icon-md {