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,38 +33,39 @@ 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. + +### Blocks + +The building block of a card is the `.card-block`. Use it whenever you need a padded section within a card. + +{% example html %} +
+
+ This is some text within a card block. +
+
+{% endexample %} + +### Titles, text, and links + +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. {% example html %}
- Card image cap

Card title

+
Card subtitle

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 %} -Lists can be added to a card by adding a list group. - -{% example html %} -
- -
-{% endexample %} +### Images `.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. @@ -77,96 +78,44 @@ Lists can be added to a card by adding a list group. {% 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. +### List groups -{% 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 %} - -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. +Create lists of content in a card with a flush list group. {% example html %}
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
+
+{% endexample %} + +### Kitchen sink + +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 %} +
+ Card image cap

Card title

-
Support card subtitle
-
- Card image -

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 %} -## Sizing - -Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins. - -Using the grid: - -{% 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 custom widths: - -{% example html %} -
-

Special title treatment

-

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

- Go somewhere -
-{% endexample %} - -## Text alignment - -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). - -{% 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 -
-{% endexample %} - -## Header and footer +### Header and footer Add an optional header and/or footer within a card.