Update to rename `.card-content` to `.card-section`. This matches the Foundation...

diff --git a/docs/pages/card.md b/docs/pages/card.md
index 9a4e2c40522a5eb1b1bb69180675030055c6e16c..d61b959ab1b3077f73a9c6743a5353d477265334 100644 (file)
--- a/docs/pages/card.md
+++ b/docs/pages/card.md
@@ -9,9 +9,9 @@ tags:
 ## 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-content` element in order to achieve the traditional card look.
+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-content` classes to sub-divide a card.
+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;">
@@ -19,7 +19,7 @@ A card container has no padding, allowing you to place full-bleed images inside.
     This is a header
   </div>
   <img src="assets/img/generic/rectangle-1.jpg">
-  <div class="card-content">
+  <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>
@@ -38,7 +38,7 @@ You can also include a `.card-divider` element as a title, footer or to break up
     <h4>I'm featured</h4>
   </div>
   <img src="assets/img/generic/rectangle-1.jpg">
-  <div class="card-content">
+  <div class="card-section">
     <p>This card makes use of the card-divider element.</p>
   </div>
 </div>
@@ -48,12 +48,12 @@ You can also include a `.card-divider` element as a title, footer or to break up
 
 ### Images
 
-Images play nicely with cards. Simply include one outside of the `.card-content` element to span nicely to the edges.
+Images play nicely with cards. Simply include one outside of the `.card-section` element to span nicely to the edges.
 
 ```html_example
 <div class="card" style="width: 300px;">
   <img src="assets/img/generic/rectangle-1.jpg">
-  <div class="card-content">
+  <div class="card-section">
     <p>This is a simple card with an image.</p>
   </div>
 </div>
@@ -61,7 +61,7 @@ Images play nicely with cards. Simply include one outside of the `.card-content`
 
 ```html_example
 <div class="card" style="width: 300px;">
-  <div class="card-content">
+  <div class="card-section">
     <p>Images work just fine below the content too!</p>
   </div>
   <img src="assets/img/generic/rectangle-1.jpg">
@@ -79,7 +79,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -88,7 +88,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -97,7 +97,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -106,7 +106,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -115,7 +115,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -124,7 +124,7 @@ You can either set the width of cards with custom css or add them into the Found
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <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>
@@ -137,7 +137,7 @@ You can either set the width of cards with custom css or add them into the Found
 
 ## Common examples
 
-Cards are very flexible and work seamlessly with other foundation components.
+Cards are very flexible and work seamlessly with other Foundation components.
 Here are some common patterns to give you some inspiration!
 
 ```html_example
@@ -145,7 +145,7 @@ Here are some common patterns to give you some inspiration!
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <div class="card-section">
         <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>
@@ -155,7 +155,7 @@ Here are some common patterns to give you some inspiration!
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <div class="card-section">
         <h4>Menus</h4>
         <p>Cards play nicely with menus too! Give them a try.</p>
         <ul class="menu simple">
@@ -171,7 +171,7 @@ Here are some common patterns to give you some inspiration!
       <div class="card-divider">
         <p>Featured</p>
       </div>
-      <div class="card-content">
+      <div class="card-section">
         <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>
@@ -183,7 +183,7 @@ Here are some common patterns to give you some inspiration!
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <div class="card-section">
         <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>
@@ -193,7 +193,7 @@ Here are some common patterns to give you some inspiration!
   <div class="column">
     <div class="card">
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <div class="card-section">
         <h4>And button groups...</h4>
         <p>Button groups also work great!</p>
         <div class="button-group">
@@ -210,7 +210,7 @@ Here are some common patterns to give you some inspiration!
         <p>Centered</p>
       </div>
       <img src="assets/img/generic/rectangle-1.jpg">
-      <div class="card-content">
+      <div class="card-section">
         <p>The utility classes like .text-center work great too.</p>
         <a class="button" href="#">Click me</a>
       </div>

diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 4bdddec9f64bf7d8978ba920430072a0d872ff36..a819b94ffecd8aeebcfb8deb885a484106008893 100644 (file)
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -89,7 +89,7 @@ $card-margin: $global-margin !default;
 }
 
 /// Adds styles for a card section.
-@mixin card-content(
+@mixin card-section(
   $padding: $card-padding
 ) {
   padding: $padding;
@@ -112,7 +112,7 @@ $card-margin: $global-margin !default;
     @include card-divider;
   }
 
-  .card-content {
-    @include card-content;
+  .card-section {
+    @include card-section;
   }
 }
\ No newline at end of file