diff --git a/scss/_card.scss b/scss/_card.scss index c36433ae5d..ecfd70676e 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -54,6 +54,11 @@ margin-bottom: $card-title-spacer-y; } +// Boosted mod: prevent unwanted margin when nothing follows… +.card-title:only-child { + margin-bottom: 0; +} + .card-subtitle { margin-top: -$card-title-spacer-y / 2; margin-bottom: 0; @@ -83,7 +88,7 @@ font-weight: $font-weight-bold; // Boosted mod color: $card-cap-color; background-color: $card-cap-bg; - border-bottom: $card-border-width solid $card-border-color; + border-bottom: $card-border-width solid $card-cap-bg; // Boosted mod &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); @@ -91,10 +96,12 @@ } .card-footer { - padding: $card-cap-padding-y $card-cap-padding-x; - color: $card-cap-bg; // Boosted mod - background-color: $card-cap-color; // Boosted mod - border-top: $card-border-width solid $card-border-color; + // Boosted mod + padding: 0 $card-cap-padding-x $card-cap-padding-y; + font-weight: $font-weight-bold; + color: $card-footer-color; + background-color: $card-cap-color; + // End mod &:last-child { @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); diff --git a/scss/_variables.scss b/scss/_variables.scss index e567a455eb..4e8e4de4be 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1034,7 +1034,7 @@ $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer / 2 !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; -$card-border-color: $black !default; +$card-border-color: $gray-500 !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-cap-padding-y: $card-spacer-y / 2 !default; $card-cap-padding-x: $card-spacer-x !default; @@ -1048,6 +1048,9 @@ $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width / 2 !default; +// Boosted mod +$card-footer-color: $gray-700 !default; +// End mod // Tooltips @@ -1218,7 +1221,7 @@ $progress-height-xs: $spacer / 4 !default; $list-group-color: null !default; $list-group-bg: $white !default; -$list-group-border-color: $black !default; +$list-group-border-color: $gray-500 !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 0130d2bc09..78d80c5efb 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `` elements.

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

Go somewhere -
+
2 days ago
@@ -376,7 +376,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"— Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities. {{< example >}} -
+
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" >}}
Card title
@@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} -
+
Header
{{ .name | title }} card title
@@ -451,7 +451,16 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the

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

-{{- end -}} +{{- end }} + +
+
Header
+
+
Borderless card title
+

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

+
+
+ {{< /card.inline >}} {{< /example >}} @@ -518,7 +527,7 @@ When using card groups with footers, their content will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -528,7 +537,7 @@ When using card groups with footers, their content will automatically line up.

This card has supporting text below as a natural lead-in to additional content.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -538,7 +547,7 @@ When using card groups with footers, their content will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -687,7 +696,7 @@ Just like with card groups, card footers will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -699,7 +708,7 @@ Just like with card groups, card footers will automatically line up.

This card has supporting text below as a natural lead-in to additional content.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -711,7 +720,7 @@ Just like with card groups, card footers will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

- Last updated 3 mins ago + Last updated 3 mins ago