From 9372eef9e10b5c5b31fa7e4fdf5d4237915cd419 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Jun 2017 18:30:24 -0700 Subject: [PATCH] rename .card-inverse to .card-dark, update docs to match --- docs/4.0/components/card.md | 32 ++++++++++++++++---------------- docs/4.0/migration.md | 10 +++++----- scss/_card.scss | 4 ++-- scss/_variables.scss | 2 +- scss/mixins/_cards.scss | 4 ++-- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index 1c8117a9aa..56c4442c9a 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -52,7 +52,7 @@ Card titles are used by adding `.card-title` to a `` tag. In the same way, l Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely. {% example html %} -
+

Card title

Card subtitle
@@ -68,7 +68,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t `.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 %} -
+
Card image cap

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

@@ -81,7 +81,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t Create lists of content in a card with a flush list group. {% example html %} -
+
  • Cras justo odio
  • Dapibus ac facilisis in
    • @@ -349,10 +349,10 @@ Similar to headers and footers, cards can include top and bottom "image caps"— ### Image overlays -Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below). +Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-dark` (see below). {% example html %} -
    +
    Card image

    Card title

    @@ -366,14 +366,14 @@ Turn an image into a card background and overlay your card's text. Depending on Cards include various options for customizing their backgrounds, borders, and color. -### Inverted text +### Dark cards -By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it. +By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-dark`. Then, specify a dark `background-color` and `border-color` to go with it. -You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants). +You can also use `.card-dark` with the [contextual backgrounds variants](#background-variants). {% example html %} -
    +
    Header

    Special title treatment

    @@ -386,10 +386,10 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac ### Background variants -Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** +Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-dark`.** {% example html %} -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -397,7 +397,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -405,7 +405,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -413,7 +413,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -421,7 +421,7 @@ Cards include their own variant classes for quickly changing the `background-col
    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    @@ -666,7 +666,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns

    Last updated 3 mins ago

    -
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.