Add header/footer and card hover box-shadow

index.html

@@ -641,7 +641,6 @@ function add(x, y) {
       </div>
 
       <h4>Image on top or bottom</h4>
-      <p></p>
       <div class="row flex-center">
         <div class="card" style="width: 20rem;">
           <div class="card-body">
@@ -666,6 +665,20 @@ function add(x, y) {
   &lt;img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image"&gt;
 &lt;/div&gt;</pre>
       </div>
+
+      <h4>Header and footer</h4>
+      <div class="row flex-center">
+        <div class="card" style="width: 20rem;">
+          <div class="card-header">Header</div>
+          <div class="card-body">
+            <h4 class="card-title">My awesome Paper card!</h4>
+            <h5 class="card-subtitle">Nice looking subtitle.</h5>
+            <p class="card-text">You can also place image on the bottom of the card.</p>
+            <button>Let me go here!</button>
+          </div>
+          <div class="card-footer">Footer</div>
+        </div>
+      </div>
     </div>
 
     <div class="section">

src/cards.less

@@ -5,7 +5,25 @@
   display: flex;
   flex-direction: column;
   word-wrap: break-word;
-  border: 2px solid @muted-light;
+  border: 2px solid @muted-light; 
+
+  &:hover {
+    .shadow-hover;
+  }
+
+  .card-header,
+  .card-footer {
+    padding: .75rem 1.25rem;
+    background-color: @white-dark;
+  }
+
+  .card-header {
+    border-bottom: 2px solid @muted-light;
+  }
+
+  .card-footer {
+    border-top: 2px solid @muted-light;
+  }
 
   .card-body {
     flex: 1 1 auto;

src/colors.less

@@ -13,6 +13,8 @@
 @danger-light: lighten(@danger, 45%);
 @muted-light: lighten(@muted, 35%);
 
+@white-dark: rgba(0, 0, 0, .03);
+
 @colors: primary, secondary, success, warning, danger, muted;
 
 .make-text-color-classes(@i: length(@colors)) when (@i > 0) {