From b2b30f0d9b391b0551a60f58376fc2bf0e652dcd Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 24 Oct 2013 08:42:21 -0500
Subject: [PATCH] card body text

---
 dist/css/ionic-ios7.css   |  5 +++++
 dist/css/ionic-scoped.css |  4 ++++
 dist/css/ionic.css        |  5 +++++
 scss/ionic/_card.scss     |  3 +++
 scss/ionic/_util.scss     |  4 ++++
 test/cards.html           | 45 +++++++++++++++++++++++++++------------
 6 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 46ef0bfec6..1582c4e91e 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -2070,6 +2070,8 @@ a.button {
 
 .card-body {
   padding: 10px; }
+  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
+    margin-top: 10px; }
 
 .card-footer {
   padding: 10px;
@@ -2282,6 +2284,9 @@ a.button {
     height: 0;
     content: "."; }
 
+.full-image {
+  width: 100%; }
+
 .padding {
   padding: 10px; }
 
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index c0f24d4f46..a93b4a4b1c 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -2743,6 +2743,8 @@
       background-color: #444444; }
   .ionic .card-body {
     padding: 10px; }
+    .ionic .card-body h1, .ionic .card-body h2, .ionic .card-body h3, .ionic .card-body h4, .ionic .card-body h5, .ionic .card-body h6, .ionic .card-body p {
+      margin-top: 10px; }
   .ionic .card-footer {
     padding: 10px;
     border-bottom-right-radius: 2px;
@@ -2892,6 +2894,8 @@
       clear: both;
       height: 0;
       content: "."; }
+  .ionic .full-image {
+    width: 100%; }
   .ionic .padding {
     padding: 10px; }
   .ionic .padding-top,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index dc14ebc2ff..7bf1a529cc 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -3291,6 +3291,8 @@ a.button {
 
 .card-body {
   padding: 10px; }
+  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
+    margin-top: 10px; }
 
 .card-footer {
   padding: 10px;
@@ -3554,6 +3556,9 @@ a.button {
     height: 0;
     content: "."; }
 
+.full-image {
+  width: 100%; }
+
 .padding {
   padding: 10px; }
 
diff --git a/scss/ionic/_card.scss b/scss/ionic/_card.scss
index c97a2b41a6..4a697e1040 100644
--- a/scss/ionic/_card.scss
+++ b/scss/ionic/_card.scss
@@ -31,6 +31,9 @@
 
 .card-body {
   padding: $card-padding;
+  h1, h2, h3, h4, h5, h6, p {
+    margin-top: $content-padding;
+  }
 }
 
 .card-footer {
diff --git a/scss/ionic/_util.scss b/scss/ionic/_util.scss
index ea7a8e456c..d66b05d754 100644
--- a/scss/ionic/_util.scss
+++ b/scss/ionic/_util.scss
@@ -22,6 +22,10 @@
   }
 }
 
+.full-image {
+  width: 100%;
+}
+
 // Content Padding
 // -------------------------------
 
diff --git a/test/cards.html b/test/cards.html
index 475866015c..be55d17129 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -32,18 +32,6 @@
           </div>
         </div>
         
-        <div class="card">
-          <div class="card-header">
-            I'm a Header in a Card!
-          </div>
-          <div class="card-body">
-            This is a basic Card with some text.
-          </div>
-          <div class="card-footer">
-            I'm a Footer in a Card!
-          </div>
-        </div>
-        
         <div class="card">
           <div class="card-header">
             I'm a Header in a Card!
@@ -90,7 +78,7 @@
 
         <div class="list card">
 
-          <div href="#" class="list-item list-item-thumbnail">
+          <div class="list-item list-item-thumbnail">
             <div class="list-item-content">
               <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
               <h2>Pretty Hate Machine</h2>
@@ -98,7 +86,7 @@
             </div>
           </div>
 
-          <div href="#" class="list-item list-item-image">
+          <div class="list-item list-item-image">
             <div class="list-item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
             </div>
@@ -113,6 +101,35 @@
 
         </div>
 
+        <div class="list card">
+
+          <div class="list-item list-item-thumbnail">
+            <div class="list-item-content">
+              <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+              <h2>Marty McFly</h2>
+              <p>November 05, 1955</p>
+            </div>
+          </div>
+
+          <div class="card-body">
+            <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
+            <p>
+              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
+              the content is from a card-body consisting of an image and paragraph text. The footer
+              consists of a Tab Bar, icons aligned left, within the card-footer.
+            </p>
+            <p>
+              <a href="#">1 Like</a>
+              <a href="#">5 Comments</a>
+            </p>
+          </div>
+
+          <div class="card-footer">
+            Like Comment Share
+          </div>
+
+        </div>
+
         <hr>
 
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>