feat(Cards): Add full bleed cards.

rocketbelt/components/cards/_cards-full-bleed.pug

@@ -0,0 +1,12 @@
+.card.card-full-bleed.z-depth-1
+  each alt in ['PS73156_1']
+    - var base = 'https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/';
+    - var short = alt.substring(0, alt.indexOf('_'));
+    .lazyload-wrapper(data-src-lg=base + short + '/' + alt + '.jpg?sw=400&sh=400')
+      img.lazyload-small(src=base + short + '/' + alt + '.jpg?sw=10&sh=10')
+      .lazyload-pad(style='padding-bottom: 100%')
+  .card-content
+    .card-title Full Bleed Cards
+    .card-body
+      p Combine an image with card content.
+      span And with the answer is one reflected plays well enough for a distinct design. Try it will fly outdoors. We search of course, since it above a cool jewel-like turquoise cushion.

rocketbelt/components/cards/_cards-full-bleed.scss

@@ -0,0 +1,21 @@
+.card-full-bleed {
+  position: relative;
+  padding: 0;
+
+  .card-content {
+    position: absolute;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    background: eased-gradient($direction: to top, $easing: in-out-sine);
+    color: color(white);
+  }
+
+  .card-title {
+    font-weight: font-weight(semibold);
+  }
+
+  .card-body {
+    font-weight: font-weight(regular);
+  }
+}

rocketbelt/components/cards/_cards.scss

@@ -1,4 +1,5 @@
 @import 'cards-action',
         'cards-basic',
+        'cards-full-bleed',
         'cards-hover',
         'cards-z-depth';

rocketbelt/tools/functions/_eased-gradient.scss

@@ -1,6 +1,6 @@
 /// @author Kendrick Arnett
 /// @param $key [default] - The easing to return.
-@function eased-gradient($direction: '', $color-start: color(black), $color-end: rgba(color(black), 0), $easing: default, $num-stops: 10) {
+@function eased-gradient($direction: '', $color-start: color(black), $color-end: rgba(color(black), 0), $easing: default, $num-stops: 12) {
   @if $direction != '' { $direction: $direction + ', '; }
 
   $gradient-stops: $direction;

templates/components/cards/index.pug

@@ -47,6 +47,16 @@ block content
           +exampleCodeOnly
             include _cards-image.pug
 
+    h2 "Full Bleed" Cards
+    .grid-fluid
+      .row
+        .col.xs-4
+          include _cards-full-bleed.pug
+      .row
+        .col.xs
+          +exampleCodeOnly
+            include _cards-full-bleed.pug
+
     script(src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js')
     script(src='../images/rocketbelt.images-lazyload.js')