diff options
| author | Mark Otto <[email protected]> | 2016-01-06 01:09:58 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-01-06 01:09:58 -0800 |
| commit | 2db13042bd2e89a528ea5502a9209e608ddfdb35 (patch) | |
| tree | 45123bc760b5ee095b701a7671f9d70b3ad53b74 /docs | |
| parent | 6d01de2f740e9d1dd082e036b63e5feb7cc219ed (diff) | |
| parent | 1614420e86ce3d60ff6c09a189ca23ab0d455286 (diff) | |
| download | bootstrap-2db13042bd2e89a528ea5502a9209e608ddfdb35.tar.xz bootstrap-2db13042bd2e89a528ea5502a9209e608ddfdb35.zip | |
Merge pull request #18501 from petetnt/card-outline-docs
Document .card-*-outline variants
Diffstat (limited to 'docs')
| -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. |