diff options
| -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. |