From c92cd319f3fca039dec2335b6edea03ea9fd8a0f Mon Sep 17 00:00:00 2001
From: Thomas Cazade <cazade.thomas@gmail.com>
Date: Wed, 1 Nov 2017 15:48:02 +0100
Subject: [PATCH] Added default card, more types to come

---
 index.html      | 33 +++++++++++++++++++++++++++++++++
 src/cards.less  | 42 ++++++++++++++++++++++++++++++++++++++++++
 src/styles.less |  3 ++-
 3 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/cards.less

diff --git a/index.html b/index.html
index d99c87b..f0c5367 100644
--- a/index.html
+++ b/index.html
@@ -582,6 +582,39 @@ function add(x, y) {
 &lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
       </div>
     </div>
+
+    <div class="section">
+      <h2>Cards</h2>
+
+      <h4>Default card</h4>
+      <div class="row flex-center">
+        <div class="card" style="width: 20rem;">
+          <img src="https://picsum.photos/768" alt="Card example image">
+          
+          <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">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
+            <button>Let me go here!</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="docs">
+        <pre>
+&lt;div class="card" style="width: 20rem;"&gt;
+  &lt;img src="https://picsum.photos/768" alt="Card example image"&gt;
+
+  &lt;div class="card-body"&gt;
+    &lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
+    &lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
+    &lt;p class="card-text"&gt;Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.&lt;/p&gt;
+    &lt;button&gt;Let me go here!&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+      </div>
+    </div>
+
     <div class="section">
       <h2>Colors</h2>
       <h4>Text</h4>
diff --git a/src/cards.less b/src/cards.less
new file mode 100644
index 0000000..d739485
--- /dev/null
+++ b/src/cards.less
@@ -0,0 +1,42 @@
+.card {
+  // Card border can't be changed with .border-x classes
+  // since we want to avoid the little blank space between
+  // image and border-top-left/right-radius, so we force
+  // the default border class and customize it on the img
+  .border;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  word-wrap: break-word;
+
+  .card-body {
+    flex: 1 1 auto;
+    padding: 1.25rem;
+
+    .card-title, h4 {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    .card-subtitle, h5 {
+      .text-secondary;
+
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    .card-text, p {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+  }
+
+  img {
+    border: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 255px 14px !important;
+    border-top-right-radius: 13px 225px !important;
+  }
+}
\ No newline at end of file
diff --git a/src/styles.less b/src/styles.less
index 3e8b4bd..1df3db0 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -13,4 +13,5 @@
 @import (less) "./tables.less";
 @import (less) "./images.less";
 @import (less) "./utilities.less";
-@import (less) "./popovers.less";
\ No newline at end of file
+@import (less) "./popovers.less";
+@import (less) "./cards.less";
\ No newline at end of file