From 3cc23e9747c84e6a2d8ae2b109657da821a6a79d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 16:44:12 -0800 Subject: [PATCH] redo sizing section with utils and grid callouts --- docs/components/card.md | 67 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 2 deletions(-) diff --git a/docs/components/card.md b/docs/components/card.md index 18c6f93931..56d20ac456 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -175,9 +175,72 @@ Card headers can be styled by adding `.card-header` to `` elements. {% endexample %} -## Header nav +## Sizing -Use Bootstrap's nav pills or tabs within a card header. +Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. + +### Using grid markup + +Using the grid, wrap cards in columns and rows as needed. + +{% example html %} +
+
+
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+{% endexample %} + +### Using utilities + +Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height) to quickly set a card's width. + +{% example html %} +
+
+

Card title

+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+ +
+
+

Card title

+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+{% endexample %} + +### Using custom CSS + +Use custom CSS in your stylesheets or as inline styles to set a width. + +{% example html %} +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{% endexample %} {% example html %}