diff options
| author | Mark Otto <[email protected]> | 2016-01-06 01:10:15 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-01-06 01:10:15 -0800 |
| commit | eecef86f4f87f5e6b5cd813dd7882302a28bf240 (patch) | |
| tree | 5f952496014a6018839c99dddec375e5a7300d92 | |
| parent | b48eb5396224c4b30edf1fd6359315a677fa3c91 (diff) | |
| parent | 2db13042bd2e89a528ea5502a9209e608ddfdb35 (diff) | |
| download | bootstrap-eecef86f4f87f5e6b5cd813dd7882302a28bf240.tar.xz bootstrap-eecef86f4f87f5e6b5cd813dd7882302a28bf240.zip | |
Merge branch 'v4-dev' into v4-outline-cards
| -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 8a794f70e..c5af2bb02 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. |