diff --git a/docs/components/card.md b/docs/components/card.md index 8b53d3fc65..1a7a2aaca8 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. -## Basic example +## 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. +Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. {% example html %}
With supporting text below as a natural lead-in to additional content.
- Go somewhere + +Some quick example text to build on the card title and make up the bulk of the card's content.
+ Button +Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Card link + Another link +Some quick example text to build on the card title and make up the bulk of the card's content.
+ Card link + Another link +With supporting text below as a natural lead-in to additional content.
- Go somewhere -With supporting text below as a natural lead-in to additional content.
- Go somewhere -With supporting text below as a natural lead-in to additional content.
- Go somewhere -With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere @@ -68,7 +108,7 @@ Using the grid: Using custom widths: {% example html %} -With supporting text below as a natural lead-in to additional content.
Go somewhere @@ -80,19 +120,19 @@ Using custom widths: You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes](). {% example html %} -With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere @@ -108,19 +148,23 @@ Add an optional header and/or footer within a card.With supporting text below as a natural lead-in to additional content.
- Go somewhere +With supporting text below as a natural lead-in to additional content.
+ Go somewhere +-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
With supporting text below as a natural lead-in to additional content.
- Go somewhere +With supporting text below as a natural lead-in to additional content.
+ Go somewhere +-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-Last updated 3 mins ago
+ +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-Last updated 3 mins ago
- +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+With supporting text below as a natural lead-in to additional content.
- Go somewhere +With supporting text below as a natural lead-in to additional content.
+ Button +-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
-+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- -
++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-Last updated 3 mins ago
-This card has supporting text below as a natural lead-in to additional content.
-Last updated 3 mins ago
-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.
-Last updated 3 mins ago
-This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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.
Last updated 3 mins ago
@@ -290,6 +331,41 @@ Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapperThis is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+This card has supporting text below as a natural lead-in to additional content.
+Last updated 3 mins ago
+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.
+Last updated 3 mins ago
+