Merge pull request #19476 from delftswa2016/v4-card-docs

Added explicit commentary to .card-* classes

1 files changed, 12 insertions, 0 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index b53d2e39a..14db8f962 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Lists can be added to a card by adding a list group.
+
 {% example html %}
 <div class="card">
   <ul class="list-group list-group-flush">
@@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+
 {% example html %}
 <div class="card">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
@@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
+
 {% example html %}
 <div class="card card-block">
   <h4 class="card-title">Card title</h4>
@@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
+
+The multiple content types can be easily combined to create the card you need. See below for an example.
+
 {% example html %}
 <div class="card">
   <div class="card-block">
@@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
 </div>
 {% endexample %}
 
+Card headers can be styled by adding `.card-header` to `<h*>` elements.
+
 {% example html %}
 <div class="card">
   <h3 class="card-header">Featured</h3>