Added cards to rounded elements example

Within
- Foundation Docs
- Visual Regression Testing

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 810244b5a73e54b4db9a0c8899d267028f4e73f2..be5db447510c9413e819333c5af1174023cad2f9 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -47,7 +47,9 @@ Looking for more customization including responsive breakpoints? Click here for
 
 ## Rounded Elements
 
-These `.rounded` classes helps to make an element round its corners. This will help you quickly style the borders of an element. Mostly used in images, buttons and more
+These `.rounded` classes helps to make an element round its corners. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards and more
+
+#### Buttons
 
 ```html_example
 <button type="button" class="button rounded primary">Primary</button>
@@ -57,6 +59,8 @@ These `.rounded` classes helps to make an element round its corners. This will h
 <button type="button" class="button rounded warning">Warning</button>
 ```
 
+#### Images
+
 ```html
 <img src="" class="rounded">
 <img src="" class="rounded-circle">
@@ -66,7 +70,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
 <img src="" class="rounded-left">
 ``` 
 
-<div class="docs-code-live">
+<div class="docs-code-live m-b-20">
        <img src="http://placehold.it/100x100" class="rounded m-r-10">
        <img src="http://placehold.it/100x100" class="rounded-circle m-r-10">
        <img src="http://placehold.it/100x100" class="rounded-top m-r-10">
@@ -75,6 +79,62 @@ These `.rounded` classes helps to make an element round its corners. This will h
        <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
 </div>
 
+#### Cards
+
+```html
+<div class="rounded card">
+  <img src="assets/img/generic/rectangle-1.jpg">
+  <div class="card-divider">
+    This is a Middle section
+  </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>
+</div>
+```
+
+<div class="docs-code-live">
+       <div class="row">
+               <div class="small-4 columns">
+                       <div class="rounded card">
+                         <img src="assets/img/generic/rectangle-1.jpg">
+                         <div class="card-divider">
+                           Rounded Card
+                         </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>
+                       </div>
+               </div>
+               <div class="small-4 columns">
+                       <div class="rounded card">
+                         <img src="assets/img/generic/rectangle-1.jpg">
+                         <div class="card-divider">
+                           Rounded Card
+                         </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>
+                       </div>
+               </div>
+               <div class="small-4 columns">
+                       <div class="rounded card">
+                         <img src="assets/img/generic/rectangle-1.jpg">
+                         <div class="card-divider">
+                           Rounded Card
+                         </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>
+                       </div>
+               </div>
+       </div>
+</div>
+
 ---
 
 ## Font Styling

diff --git a/test/visual/prototype/rounded.html b/test/visual/prototype/rounded.html
index 339229e0e1ce9025bc33847045a3c629cc31477d..0a1624d027af79cb56eac352455fb53355adaeab 100644 (file)
--- a/test/visual/prototype/rounded.html
+++ b/test/visual/prototype/rounded.html
@@ -27,6 +27,19 @@
       <img src="http://placehold.it/100x100" class="rounded-bottom m-r-10">
       <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
     </div>
+    <div class="row column">
+      <h2 class="m-t-20">Rounded Cards</h2>
+      <div class="rounded card" style="width: 300px;">
+        <img src="../assets/img/generic/rectangle-1.jpg">
+        <div class="card-divider">
+          Rounded Card
+        </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>
+      </div>
+    </div>
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>