From 4b88284b5aeb6e77f20febfe9ceb0633529f9eba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 16:43:21 -0800 Subject: [PATCH] redo the supported content section entirely to give it sub sections --- docs/components/card.md | 131 ++++++++++++---------------------------- 1 file changed, 40 insertions(+), 91 deletions(-) diff --git a/docs/components/card.md b/docs/components/card.md index 85261469ca..18c6f93931 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -33,73 +33,31 @@ Below is an example of a basic card with mixed content and a fixed width. Cards ## Content types -Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need. +Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported. -{% example html %} -
- Card image cap -
-

Card title

-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
- -
- Card link - Another link -
-
-{% endexample %} - -Lists can be added to a card by adding a list group. +### Blocks -{% example html %} -
- -
-{% endexample %} - -`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. +The building block of a card is the `.card-block`. Use it whenever you need a padded section within a card. {% example html %}
- Card image cap
-

Some quick example text to build on the card title and make up the bulk of the card's content.

+ This is some text within a card block.
{% endexample %} -Card titles are used by adding `.card-title` to a `` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `` tag. +### Titles, text, and links -{% example html %} -
-

Card title

-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-{% endexample %} +Card titles are used by adding `.card-title` to a `` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `` tag. Subtitles are used by adding a `.card-subtitle` to an `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. -The multiple content types can be easily combined to create the card you need. See below for an example. - {% example html %}

Card title

-
Support card subtitle
-
- Card image -
+
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link @@ -107,66 +65,57 @@ The multiple content types can be easily combined to create the card you need. S
{% endexample %} -## Sizing - -Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins. +### Images -Using the grid: +`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. {% 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 -
+
+ Card image cap +
+

Some quick example text to build on the card title and make up the bulk of the card's content.

{% endexample %} -Using custom widths: +### List groups + +Create lists of content in a card with a flush list group. {% example html %} -
-

Special title treatment

-

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

- Go somewhere +
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
{% endexample %} -## Text alignment +### Kitchen sink -You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment). +Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. {% 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 -
- -
-

Special title treatment

-

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

- Go somewhere +
+ Card image cap +
+

Card title

+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
+
+ Card link + Another link +
{% endexample %} -## Header and footer +### Header and footer Add an optional header and/or footer within a card. -- 2.47.3