updates card docs with one more example and removes additional use cases

diff --cc docs/assets/scss/docs.scss
index afa3f15feefb40b134bbbe27278f600115941fde,605892cf7d2b5b41f75c13e6712ae5ca626e68f8..708b6743e62f9dc4efcc6b39dfde8247abe4e3cb
--- 1/docs/assets/scss/docs.scss
--- 2/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@@ -191,6 -191,11 +191,15 @@@ a#notice 
    100% { opacity: 1; transform: scale(1, 1);}
  }
  
 -}
 +.youtube {
 +  background: url("../img/icons/youtube.png") no-repeat center 0;
 +}
++
+ .menu li.docs-nav-version {
+   display: flex;
+   align-items: center;
+ 
+   span {
+     line-height: 2.5;
+   }
++}

diff --cc docs/pages/card.md
index 0000000000000000000000000000000000000000,d61b959ab1b3077f73a9c6743a5353d477265334..b131bfed92da4fe4de3187ebb5ab70ddd5107de3
mode 000000,100644..100644
--- /dev/null
--- 2/docs/pages/card.md
+++ b/docs/pages/card.md
@@@ -1,0 -1,220 +1,179 @@@
 -Images play nicely with cards. Simply include one outside of the `.card-section` element to span nicely to the edges.
+ ---
+ title: Card
+ description: Cards are a popular and flexible UI component.
+ sass: scss/components/_card.scss
+ tags:
+   - card
+ ---
+ 
+ ## Basics
+ 
+ A card is just an element with a `.card` class applied. You can put any kind of content inside.
+ Make sure you wrap your content in a `.card-section` element in order to achieve the traditional card look.
+ 
+ A card container has no padding, allowing you to place full-bleed images inside. Use the `.card-divider` and `.card-section` classes to sub-divide a card.
+ 
+ ```html_example
+ <div class="card" style="width: 300px;">
+   <div class="card-divider">
+     This is a header
+   </div>
+   <img src="assets/img/generic/rectangle-1.jpg">
+   <div class="card-section">
+     <h4>This is a card.</h4>
+     <p>It has an easy to override visual style, and is appropriately subdued.</p>
+   </div>
+ </div>
+ ```
+ 
+ ---
+ 
+ ### Card Divider
+ 
+ You can also include a `.card-divider` element as a title, footer or to break up content.
+ 
+ ```html_example
+ <div class="card" style="width: 300px;">
+   <div class="card-divider">
+     <h4>I'm featured</h4>
+   </div>
+   <img src="assets/img/generic/rectangle-1.jpg">
+   <div class="card-section">
+     <p>This card makes use of the card-divider element.</p>
+   </div>
+ </div>
+ ```
+ 
+ ---
+ 
+ ### Images
+ 
 -```html_example
 -<div class="card" style="width: 300px;">
++Images play nicely with cards. Simply include one outside of the `.card-section` element to span nicely to the edges. Or move the image inside the `.card-section` to have padding around the image.
+ 
 -```
++```html
++<!-- image has no padding -->
++<div class="card">
+   <img src="assets/img/generic/rectangle-1.jpg">
+   <div class="card-section">
+     <p>This is a simple card with an image.</p>
+   </div>
+ </div>
 -```html_example
 -<div class="card" style="width: 300px;">
+ 
 -    <p>Images work just fine below the content too!</p>
++<!-- image has padding -->
++<div class="card">
+   <div class="card-section">
 -  <img src="assets/img/generic/rectangle-1.jpg">
++    <img src="assets/img/generic/rectangle-1.jpg">
++  </div>
++  <div class="card-section">
++    <p>This is a simple card with an image inside a `.card-section`.</p>
+   </div>
 ----
 -
 -## Sizing
 -
 -You can either set the width of cards with custom css or add them into the Foundation grid.
 -
 -```html_example
 -<div class="row small-up-2 medium-up-3">
+ </div>
+ ```
+ 
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
++<div class="row small-up-3">
+   <div class="column">
+     <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -      <img src="assets/img/generic/rectangle-1.jpg">
++        <p>This is a simple card with an image.</p>
+       </div>
+     </div>
+   </div>
+   <div class="column">
+     <div class="card">
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       <div class="card-section">
 -    </div>
 -  </div>
 -  <div class="column">
 -    <div class="card">
 -      <img src="assets/img/generic/rectangle-1.jpg">
++        <img src="assets/img/generic/rectangle-1.jpg">
+       </div>
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       <div class="card-section">
 -  <div class="column">
 -    <div class="card">
 -      <img src="assets/img/generic/rectangle-1.jpg">
 -      <div class="card-section">
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
 -      </div>
 -    </div>
++        <p>This is a simple card with an image inside a `.card-section`.</p>
+       </div>
+     </div>
+   </div>
 -      <img src="assets/img/generic/rectangle-1.jpg">
++</div>
++
++```html
++<div class="card">
++  <div class="card-section">
++    <p>Images work just fine below the content too!</p>
+   </div>
++  <img src="assets/img/generic/rectangle-1.jpg">
++</div>
++```
++
++<div class="row small-up-3">
+   <div class="column">
+     <div class="card">
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       <div class="card-section">
 -    </div>
 -  </div>
 -  <div class="column">
 -    <div class="card">
++        <p>Images work just fine below the content too!</p>
+       </div>
 -      <div class="card-section">
 -        <h4>This is a card.</h4>
 -        <p>It has an easy to override visual style, and is appropriately subdued.</p>
 -      </div>
+       <img src="assets/img/generic/rectangle-1.jpg">
 -```
+     </div>
+   </div>
+ </div>
 -## Common examples
+ 
+ ---
+ 
 -Cards are very flexible and work seamlessly with other Foundation components.
 -Here are some common patterns to give you some inspiration!
++## Sizing
+ 
 -        <h4>Dreams feel real</h4>
 -        <p>I'm going to improvise. Listen, there's something you should know about me... about inception.</p>
 -        <small>Last updated 1 minute ago</small>
++You can either set the width of cards with custom css or add them into the Foundation grid.
+ 
+ ```html_example
+ <div class="row small-up-2 medium-up-3">
+   <div class="column">
+     <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -        <h4>Menus</h4>
 -        <p>Cards play nicely with menus too! Give them a try.</p>
 -        <ul class="menu simple">
 -          <li><a href="#">One</a></li>
 -          <li><a href="#">Two</a></li>
 -          <li><a href="#">Three</a></li>
 -        </ul>
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
+   <div class="column">
+     <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -      <div class="card-divider">
 -        <p>Featured</p>
 -      </div>
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
+   <div class="column">
+     <div class="card">
 -        <h4>Your title here!</h4>
 -        <p>An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
 -      </div>
 -      <div class="card-divider">
 -        <small>Last updated 10 minutes ago</small>
++      <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -  <div class="column">
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
 -        <h4>Buttons!</h4>
 -        <p>Who doesn't love a good button? Buttons work in all of their forms too.</p>
 -        <a class="button" href="#">I'm a button</a>
++</div>
++<div class="row">
++  <div class="medium-4 columns">
+     <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -  <div class="column">
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
 -        <h4>And button groups...</h4>
 -        <p>Button groups also work great!</p>
 -        <div class="button-group">
 -          <a class="button">One</a>
 -          <a class="button">Two</a>
 -          <a class="button">Three</a>
 -        </div>
++  <div class="medium-5 columns">
+     <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -  <div class="column">
 -    <div class="card text-center">
 -      <div class="card-divider">
 -        <p>Centered</p>
 -      </div>
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
 -        <p>The utility classes like .text-center work great too.</p>
 -        <a class="button" href="#">Click me</a>
++  <div class="medium-3 columns">
++    <div class="card">
+       <img src="assets/img/generic/rectangle-1.jpg">
+       <div class="card-section">
 -```
++        <h4>This is a card.</h4>
++        <p>It has an easy to override visual style, and is appropriately subdued.</p>
+       </div>
+     </div>
+   </div>
+ </div>
++```