From 1614420e86ce3d60ff6c09a189ca23ab0d455286 Mon Sep 17 00:00:00 2001
From: petetnt <pete.a.nykanen@gmail.com>
Date: Wed, 9 Dec 2015 11:02:04 +0200
Subject: [PATCH] Document .card-*-outline variants
---
docs/components/card.md | 55 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 55 insertions(+)
diff --git a/docs/components/card.md b/docs/components/card.md
index 9be52fd2f5..65223d1582 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.
--
GitLab