cards

1 files changed, 286 insertions, 0 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
new file mode 100644
index 000000000..237588c55
--- /dev/null
+++ b/docs/components/card.md
@@ -0,0 +1,286 @@
+---
+layout: page
+title: Cards
+---
+
+A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
+
+If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.
+
+### Basic example
+
+Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment.
+
+{% example html %}
+<div class="card">
+  <h3 class="card-title">Special title treatment</h3>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+{% endexample %}
+
+### Text alignment
+
+You can quickly change the text alignment of any card—in it's entirety or specific parts—with our [text align classes]().
+
+{% example html %}
+<div class="card">
+  <h4 class="card-title">Special title treatment</h4>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+
+<div class="card text-center">
+  <h4 class="card-title">Special title treatment</h4>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+
+<div class="card text-right">
+  <h4 class="card-title">Special title treatment</h4>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+{% endexample %}
+
+### Header and footer
+
+Add an optional header and/or footer within a card.
+
+{% example html %}
+<div class="card">
+  <div class="card-header">
+    Featured
+  </div>
+  <h4 class="card-title">Special title treatment</h4>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    Quote
+  </div>
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card text-center">
+  <div class="card-header">
+    Featured
+  </div>
+  <h4 class="card-title">Special title treatment</h4>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-footer text-muted">
+    2 days ago
+  </div>
+</div>
+
+<div class="card text-center">
+  <div class="card-header">
+    Quote
+  </div>
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+  <div class="card-footer text-muted">
+    2 days ago
+  </div>
+</div>
+{% endexample %}
+
+### Image caps
+
+Similar to headers and footers, cards include top and bottom image caps.
+
+{% example html %}
+<div class="card">
+  <img class="card-img-top" data-src="holder.js/240x180/" alt="Card image cap">
+  <h4 class="card-title">Card title</h4>
+  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+</div>
+<div class="card">
+  <h4 class="card-title">Card title</h4>
+  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  <img class="card-img-bottom" data-src="holder.js/240x180/" alt="Card image cap">
+</div>
+{% endexample %}
+
+### Image overlays
+
+Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse`.
+
+{% example html %}
+<div class="card card-inverse">
+  <img class="card-img" data-src="holder.js/270x270/#55595c:#373a3c/text:Card image" alt="Card image">
+  <div class="card-img-overlay">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+</div>
+{% endexample %}
+
+### Inverted text
+
+Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. **Add `.card-inverse` for white text on a dark background.** You'll need to specify the `background-color` and `border-color` to go with it, or use the [contextual backgrounds](#context-variations).
+
+{% example html %}
+<div class="card card-inverse" style="background-color: #333; border-color: #333;">
+  <h3 class="card-title">Special title treatment</h3>
+  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  <a href="#" class="btn btn-primary">Go somewhere</a>
+</div>
+{% endexample %}
+
+### Background variants
+
+Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. Darker colors require the use of `.card-inverse`.
+
+{% example html %}
+<div class="card card-inverse card-primary text-center">
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+<div class="card card-inverse card-success text-center">
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+<div class="card card-inverse card-info text-center">
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+<div class="card card-inverse card-warning text-center">
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+<div class="card card-inverse card-danger text-center">
+  <blockquote class="card-blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  </blockquote>
+</div>
+{% endexample %}
+
+### Groups
+
+Set a `width` on the `.card-group`, content automatically sizes for equal columns via `display: table;` and `table-layout: fixed;`. And because we're using table styles, we also get equal height for free.
+
+{% example html %}
+<div class="card-group">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+</div>
+{% endexample %}
+
+### Sets
+
+Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
+
+{% example html %}
+<div class="card-set-wrapper">
+  <div class="card-set">
+    <div class="card">
+      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+    <div class="card">
+      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+    <div class="card">
+      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+</div>
+{% endexample %}
+
+### Columns
+
+Cards can be organized into columns by wrapping a group with `.card-columns`.
+
+{% example html %}
+<div class="card-columns">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/260x160/" alt="Card image cap">
+    <h4 class="card-title">Card title that wraps to a new line</h4>
+    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+  </div>
+  <div class="card">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/260x160/" alt="Card image cap">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <div class="card card-inverse card-primary text-center">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+  <div class="card">
+    <img class="card-img" data-src="holder.js/260x260/" alt="Card image">
+  </div>
+  <div class="card text-center">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <div class="card text-right">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
+  <div class="card">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+</div>
+{% endexample %}