diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 77f41ca57..6fa30a9f6 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -528,6 +528,40 @@ Use card groups to render cards as a single, attached element with equal width a When using card groups with footers, their content will automatically line up. +{% example html %} +<div class="card-group"> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <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> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <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> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> + <div class="card-block"> + <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> + </div> + <div class="card-footer"> + <small class="text-muted">Last updated 3 mins ago</small> + </div> + </div> +</div> +{% endexample %} Only applies to small devices and above. |