diff options
| author | petetnt <[email protected]> | 2015-12-09 11:02:04 +0200 |
|---|---|---|
| committer | petetnt <[email protected]> | 2015-12-09 11:02:04 +0200 |
| commit | 1614420e86ce3d60ff6c09a189ca23ab0d455286 (patch) | |
| tree | 5723220c6c56cf24564fe1a2af151af37ff63baf | |
| parent | 2f257445c3d297077ce6dc06ff1b8559d36b6495 (diff) | |
| download | bootstrap-1614420e86ce3d60ff6c09a189ca23ab0d455286.tar.xz bootstrap-1614420e86ce3d60ff6c09a189ca23ab0d455286.zip | |
Document .card-*-outline variants
| -rw-r--r-- | docs/components/card.md | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 9be52fd2f..65223d158 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -312,6 +312,61 @@ Cards include their own variant classes for quickly changing the `background-col </div> {% endexample %} +## Outline variants + +In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-*-outline` ones to style just the `border-color` of a card. + +{% example html %} +<div class="card card-primary-outline text-xs-center"> + <div class="card-block"> + <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> +<div class="card card-secondary-outline text-xs-center"> + <div class="card-block"> + <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> +<div class="card card-success-outline text-xs-center"> + <div class="card-block"> + <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> +<div class="card card-info-outline text-xs-center"> + <div class="card-block"> + <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> +<div class="card card-warning-outline text-xs-center"> + <div class="card-block"> + <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> +<div class="card card-danger-outline text-xs-center"> + <div class="card-block"> + <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> +{% endexample %} + ## Groups Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect. |