From 983038bb57acffbddfe1852ac2659ad613857a0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Dec 2025 12:25:12 -0800 Subject: [PATCH 1/4] Start process of redoing Cards --- scss/_card.scss | 98 +++++++++-------------- site/src/content/docs/components/card.mdx | 95 ++++++++++------------ 2 files changed, 81 insertions(+), 112 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index 90beddccc2cb..817fb08bd756 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -7,23 +7,23 @@ // scss-docs-start card-variables $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; -$card-title-spacer-y: $spacer * .5 !default; -$card-title-color: null !default; $card-subtitle-color: null !default; $card-border-width: var(--border-width) !default; $card-border-color: var(--border-color-translucent) !default; -$card-border-radius: var(--border-radius) !default; +$card-border-radius: var(--border-radius-lg) !default; $card-box-shadow: null !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-padding-y: $card-spacer-y * .5 !default; +$card-cap-padding-y: $card-spacer-y !default; $card-cap-padding-x: $card-spacer-x !default; -$card-cap-bg: rgba(var(--body-color-rgb), .03) !default; +$card-cap-bg: var(--bg-1) !default; $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; $card-bg: var(--bg-body) !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width * .5 !default; + +$card-body-gap: $card-spacer-y * .5 !default; // scss-docs-end card-variables @layer components { @@ -31,8 +31,6 @@ $card-group-margin: $grid-gutter-width * .5 !default; // scss-docs-start card-css-vars --card-spacer-y: #{$card-spacer-y}; --card-spacer-x: #{$card-spacer-x}; - --card-title-spacer-y: #{$card-title-spacer-y}; - --card-title-color: #{$card-title-color}; --card-subtitle-color: #{$card-subtitle-color}; --card-border-width: #{$card-border-width}; --card-border-color: #{$card-border-color}; @@ -48,6 +46,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; --card-bg: #{$card-bg}; --card-img-overlay-padding: #{$card-img-overlay-padding}; --card-group-margin: #{$card-group-margin}; + --card-body-gap: #{$card-body-gap}; // scss-docs-end card-css-vars position: relative; @@ -58,80 +57,64 @@ $card-group-margin: $grid-gutter-width * .5 !default; color: var(--color-body); word-wrap: break-word; background-color: var(--card-bg); - background-clip: border-box; - border: var(--card-border-width) solid var(--card-border-color); - @include border-radius(var(--card-border-radius)); + // border: var(--card-border-width) solid var(--card-border-color); + // @include border-radius(var(--card-border-radius)); @include box-shadow(var(--card-box-shadow)); > hr { margin-inline: 0; } - - > .list-group { - border-block: inherit; - - &:first-child { - border-block-start-width: 0; - @include border-top-radius(var(--card-inner-border-radius)); - } - - &:last-child { - border-block-end-width: 0; - @include border-bottom-radius(var(--card-inner-border-radius)); - } - } - - // Due to specificity of the above selector (`.card > .list-group`), we must - // use a child selector here to prevent double borders. - > .card-header + .list-group, - > .list-group + .card-footer { - border-block-start: 0; - } } .card-body { + display: flex; // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; + flex-direction: column; + gap: var(--card-body-gap); + align-items: flex-start; padding: var(--card-spacer-y) var(--card-spacer-x); color: var(--card-color); - } + border: solid var(--card-border-color); + border-width: 0 var(--card-border-width); - .card-title { - margin-bottom: var(--card-title-spacer-y); - color: var(--card-title-color); + > * { + margin-block: 0; + } } - .card-subtitle { - margin-top: calc(-.5 * var(--card-title-spacer-y)); - margin-bottom: 0; - color: var(--card-subtitle-color); - } + .card-body, + .card-list { + // border: var(--card-border-width) solid var(--card-border-color); + border: solid var(--card-border-color); + border-width: 0 var(--card-border-width); - .card-text:last-child { - margin-bottom: 0; - } + &:first-child { + @include border-top-radius(var(--card-border-radius)); + border-top-width: var(--card-border-width); + } - .card-link { - &:hover { - text-decoration: none; + &:last-child { + @include border-bottom-radius(var(--card-border-radius)); + border-bottom-width: var(--card-border-width); } - + .card-link { - margin-inline-start: var(--card-spacer-x); + &:not(:first-child):not(:last-child) { + border-block-end-width: var(--card-border-width); } } - // - // Optional textual caps - // + .card-subtitle { + margin-top: calc(var(--card-body-gap) * -.5); + } .card-header { padding: var(--card-cap-padding-y) var(--card-cap-padding-x); margin-bottom: 0; // Removes the default margin-bottom of color: var(--card-cap-color); background-color: var(--card-cap-bg); - border-block-end: var(--card-border-width) solid var(--card-border-color); + border: var(--card-border-width) solid var(--card-border-color); &:first-child { @include border-radius(var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0); @@ -142,7 +125,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; padding: var(--card-cap-padding-y) var(--card-cap-padding-x); color: var(--card-cap-color); background-color: var(--card-cap-bg); - border-block-start: var(--card-border-width) solid var(--card-border-color); + border: var(--card-border-width) solid var(--card-border-color); &:last-child { @include border-radius(0 0 var(--card-inner-border-radius) var(--card-inner-border-radius)); @@ -154,7 +137,8 @@ $card-group-margin: $grid-gutter-width * .5 !default; // Header navs // - .card-header-tabs { + // Combined selector because of specificity match with `.nav` base class + .nav.card-header-tabs { margin-inline: calc(-.5 * var(--card-cap-padding-x)); margin-bottom: calc(-1 * var(--card-cap-padding-y)); border-block-end: 0; @@ -165,10 +149,6 @@ $card-group-margin: $grid-gutter-width * .5 !default; } } - .card-header-pills { - margin-inline: calc(-.5 * var(--card-cap-padding-x)); - } - // Card image .card-img-overlay { position: absolute; @@ -181,6 +161,8 @@ $card-group-margin: $grid-gutter-width * .5 !default; .card-img-top, .card-img-bottom { width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch + outline: var(--card-border-width) solid var(--card-border-color); + outline-offset: calc(var(--card-border-width) * -1); } .card-img, diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index 5ba69abe5e89..6b844cee2d54 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -6,25 +6,31 @@ toc: true import { getData } from '@libs/data' -## About +Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. **Cards have no fixed width to start**, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various [sizing options](#sizing). -A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. - -## Example - -Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) as needed. - -Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing). - - +
-
Card title
+

Card title

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

- Go somewhere + Go somewhere
`} /> +## How it works + +Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. + +- Cards are built with flexbox, so they offer easy alignment via [flexbox utilities]([[docsref:/utilities/flex]]) and [grid column classes]([[docsref:/layout/grid#column-classes]]). + +- Cards have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) as needed. + +- Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while the body is required. Images can also serve as headers and footers. + +- Card and card body are both `flex` containers, so content can be aligned and stretched as needed with utilities and whatever HTML you require. + +- Cards can have nearly any content, including text, images, lists, and more. + ## Content types Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported. @@ -41,48 +47,57 @@ The building block of a card is the `.card-body`. Use it whenever you need a pad ### 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 an `` tag. +Titles, text, and links within cards all have required class names for managing alignment. Size and color is up to you to manage. -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. +- For a title, use `.card-title`. +- For a subtitle, use `.card-subtitle`. This uses a negative margin to position itself closer to the title. +- For text, use `.card-text`. This removes block margins from the element.
-
Card title
-
Card subtitle
+

Example card title

+
With a 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 + Card link
`} /> ### Images -`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card’s borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. +Use `.card-img-top` and `.card-img-bottom` to round the top and bottom corners of the image. - +

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

+ +
+
+

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

+
+
`} /> ### List groups -Create lists of content in a card with a flush list group. +When your card only contains a list group—no header, footer, or body—simply use a `.list-group` if possible. Card borders are applied to individual card sub-components, so in this case, you‘ll have the list group’s default border. -
    +
    • An item
    • A second item
    • A third item
    `} /> +When combined with other card sub-components, use `.card-list` to manage borders and rounded corners. +
    Featured
    -
      +
      • An item
      • A second item
      • A third item
        • @@ -90,7 +105,7 @@ Create lists of content in a card with a flush list group. `} /> -
          +
          • An item
          • A second item
          • A third item
            • @@ -110,7 +125,7 @@ Mix and match multiple content types to create the card you need, or throw every
            Card title

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

            -
              +
              • An item
              • A second item
              • A third item
                • @@ -238,34 +253,6 @@ Use custom CSS in your stylesheets or as inline styles to set a width. `} /> -## Text alignment - -You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text-alignment]]). - - -
                -
                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 -
                -
                `} /> - ## Navigation Add some navigation to a card’s header (or block) with Bootstrap’s [nav components]([[docsref:/components/navs-tabs]]). @@ -293,7 +280,7 @@ Add some navigation to a card’s header (or block) with Bootstrap’s [nav comp
                -
                  +
                  • Active
                    • From 4f6ba4673fb94854642bdb55024ed902030f4fbc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Dec 2025 20:38:43 -0800 Subject: [PATCH 2/4] better --- scss/_card.scss | 32 ++++++ site/src/content/docs/components/card.mdx | 115 ++++++++++++---------- site/src/scss/_content.scss | 9 ++ 3 files changed, 102 insertions(+), 54 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index 817fb08bd756..c7f115d86360 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -176,6 +176,38 @@ $card-body-gap: $card-spacer-y * .5 !default; } + .card-row { + flex-direction: row; + + .card-body, + .card-list { + border-width: var(--card-border-width) 0; + @include border-radius(0); + + &:first-child { + @include border-start-radius(var(--card-inner-border-radius)); + border-inline-start-width: var(--card-border-width); + } + + &:last-child { + @include border-end-radius(var(--card-inner-border-radius)); + border-inline-end-width: var(--card-border-width); + } + + &:not(:first-child):not(:last-child) { + border-inline-end-width: var(--card-border-width); + } + } + } + + .card-img-start { + @include border-start-radius(var(--card-inner-border-radius)); + } + + .card-img-end { + @include border-end-radius(var(--card-inner-border-radius)); + } + // // Card groups // diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index 6b844cee2d54..ada051117035 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -122,7 +122,7 @@ Mix and match multiple content types to create the card you need, or throw every
                    -
                    Card title
                    +

                    Card title

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

                      @@ -145,7 +145,7 @@ Add an optional header and/or footer within a card. Featured
                -
                Special title treatment
                +

                Special title treatment

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

                Go somewhere
                @@ -156,7 +156,7 @@ Card headers can be styled by adding `.card-header` to `` elements.
                Featured
                -
                Special title treatment
                +

                Special title treatment

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

                Go somewhere
                @@ -183,7 +183,7 @@ Card headers can be styled by adding `.card-header` to `` elements. Featured
                -
                Special title treatment
                +

                Special title treatment

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

                Go somewhere
                @@ -192,11 +192,11 @@ Card headers can be styled by adding `.card-header` to `` elements. `} /> -## Sizing +## Width 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 +### Grid Using the grid, wrap cards in columns and rows as needed. @@ -204,7 +204,7 @@ Using the grid, wrap cards in columns and rows as needed.
                -
                Special title treatment
                +

                Card title

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

                Go somewhere
                @@ -213,7 +213,7 @@ Using the grid, wrap cards in columns and rows as needed.
                -
                Special title treatment
                +

                Card title

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

                Go somewhere
                @@ -221,13 +221,13 @@ Using the grid, wrap cards in columns and rows as needed.
                `} /> -### Using utilities +### Utilities Use our handful of [available sizing utilities]([[docsref:/utilities/width]]) to quickly set a card’s width.
                -
                Card title
                +

                Card title

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

                Button
                @@ -235,19 +235,19 @@ Use our handful of [available sizing utilities]([[docsref:/utilities/width]]) to
                -
                Card title
                +

                Card title

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

                Button
                `} /> -### Using custom CSS +### Custom CSS Use custom CSS in your stylesheets or as inline styles to set a width.
                -
                Special title treatment
                +

                Card title

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

                Go somewhere
                @@ -278,6 +278,8 @@ Add some navigation to a card’s header (or block) with Bootstrap’s [nav comp
                `} /> +This works with `.nav-pills` as well. +
                  @@ -310,14 +312,14 @@ Similar to headers and footers, cards can include top and bottom “image caps
                  -
                  Card title
                  +

                  Card title

                  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

                -
                Card title
                +

                Card title

                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

                @@ -331,7 +333,7 @@ Turn an image into a card background and overlay your card’s text. Depending o
                -
                Card title
                +

                Card title

                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

                @@ -341,23 +343,28 @@ Turn an image into a card background and overlay your card’s text. Depending o Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image. -## Horizontal +## Card row -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content. +Use the `.card-row` class to make a card horizontal. For image caps, use the `.card-img-start` or `.card-img-end` class to position the image at the (inline) start or end position of the card. - -
                -
                - -
                -
                -
                -
                Card title
                -

                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

                -
                -
                + + +
                +

                Card title

                +

                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

                +
                +
                `} /> + +And with the reverse layout: + + +
                +

                Card title

                +

                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

                +
                `} /> ## Card styles @@ -371,7 +378,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg `
                Header
                -
                ${themeColor.title} card title
                +

                ${themeColor.title} card title

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

                `)} /> @@ -385,7 +392,7 @@ Use [border utilities]([[docsref:/utilities/border]]) to change just the `border `
                Header
                -
                ${themeColor.title} card title
                +

                ${themeColor.title} card title

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

                `)} /> @@ -397,7 +404,7 @@ You can also change the borders on the card header and footer as needed, and eve
                Header
                -
                Success card title
                +

                Success card title

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

                Footer
                @@ -415,7 +422,7 @@ Use card groups to render cards as a single, attached element with equal width a
                -
                Card title
                +

                Card title

                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

                @@ -423,7 +430,7 @@ Use card groups to render cards as a single, attached element with equal width a
                -
                Card title
                +

                Card title

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

                Last updated 3 mins ago

                @@ -431,7 +438,7 @@ Use card groups to render cards as a single, attached element with equal width a
                -
                Card title
                +

                Card title

                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

                @@ -444,7 +451,7 @@ When using card groups with footers, their content will automatically line up.
                -
                Card title
                +

                Card title

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

                @@ -454,7 +461,7 @@ When using card groups with footers, their content will automatically line up.
                -
                Card title
                +

                Card title

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

                @@ -464,7 +471,7 @@ When using card groups with footers, their content will automatically line up.
                -
                Card title
                +

                Card title

                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.

                @@ -482,7 +489,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]([[docsref:/layout/gr
                -
                Card title
                +

                Card title

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

                @@ -491,7 +498,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]([[docsref:/layout/gr
                -
                Card title
                +

                Card title

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

                @@ -500,7 +507,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]([[docsref:/layout/gr
                -
                Card title
                +

                Card title

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

                @@ -509,7 +516,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]([[docsref:/layout/gr
                -
                Card title
                +

                Card title

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

                @@ -523,7 +530,7 @@ Change it to `.row-cols-3` and you’ll see the fourth card wrap.
                -
                Card title
                +

                Card title

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

                @@ -532,7 +539,7 @@ Change it to `.row-cols-3` and you’ll see the fourth card wrap.
                -
                Card title
                +

                Card title

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

                @@ -541,7 +548,7 @@ Change it to `.row-cols-3` and you’ll see the fourth card wrap.
                -
                Card title
                +

                Card title

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

                @@ -550,7 +557,7 @@ Change it to `.row-cols-3` and you’ll see the fourth card wrap.
                -
                Card title
                +

                Card title

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

                @@ -564,7 +571,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
                -
                Card title
                +

                Card title

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

                @@ -573,7 +580,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
                -
                Card title
                +

                Card title

                This is a short card.

                @@ -582,7 +589,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
                -
                Card title
                +

                Card title

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

                @@ -591,7 +598,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
                -
                Card title
                +

                Card title

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

                @@ -605,7 +612,7 @@ Just like with card groups, card footers will automatically line up.
                -
                Card title
                +

                Card title

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

                @@ -617,7 +624,7 @@ Just like with card groups, card footers will automatically line up.
                -
                Card title
                +

                Card title

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

                @@ -629,7 +636,7 @@ Just like with card groups, card footers will automatically line up.
                -
                Card title
                +

                Card title

                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.

                diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss index ae74f66a92b7..e5b3c12d81f6 100644 --- a/site/src/scss/_content.scss +++ b/site/src/scss/_content.scss @@ -152,6 +152,15 @@ } // stylelint-enable selector-no-qualifying-type + // stylelint-disable-next-line selector-no-qualifying-type + rect[fill="#adb5bd"] { + fill: var(--bs-bg-2); + } + // stylelint-disable-next-line selector-no-qualifying-type + text[fill="#e9ecef"] { + fill: var(--bs-fg-4); + } + // scss-docs-start custom-color-mode // [data-bs-theme="blue"] { // --bs-body-color: var(--bs-white); From 4f3d1ef0cf01134c8638e710bd1cef8081f35106 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Dec 2025 20:51:52 -0800 Subject: [PATCH 3/4] So much better --- scss/_card.scss | 37 ++++++++++++----- site/src/content/docs/components/card.mdx | 49 ++++++----------------- 2 files changed, 41 insertions(+), 45 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index c7f115d86360..5d96a9d32c48 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -13,7 +13,7 @@ $card-border-color: var(--border-color-translucent) !default; $card-border-radius: var(--border-radius-lg) !default; $card-box-shadow: null !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-padding-y: $card-spacer-y !default; +$card-cap-padding-y: $card-spacer-y * .75 !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: var(--bg-1) !default; $card-cap-color: null !default; @@ -76,7 +76,7 @@ $card-body-gap: $card-spacer-y * .5 !default; align-items: flex-start; padding: var(--card-spacer-y) var(--card-spacer-x); color: var(--card-color); - border: solid var(--card-border-color); + border: solid var(--theme-bg, var(--card-border-color)); border-width: 0 var(--card-border-width); > * { @@ -86,8 +86,7 @@ $card-body-gap: $card-spacer-y * .5 !default; .card-body, .card-list { - // border: var(--card-border-width) solid var(--card-border-color); - border: solid var(--card-border-color); + border: solid var(--theme-bg, var(--card-border-color)); border-width: 0 var(--card-border-width); &:first-child { @@ -112,9 +111,9 @@ $card-body-gap: $card-spacer-y * .5 !default; .card-header { padding: var(--card-cap-padding-y) var(--card-cap-padding-x); margin-bottom: 0; // Removes the default margin-bottom of - color: var(--card-cap-color); - background-color: var(--card-cap-bg); - border: var(--card-border-width) solid var(--card-border-color); + color: var(--theme-contrast, var(--card-cap-color)); + background-color: var(--theme-bg, var(--card-cap-bg)); + border: var(--card-border-width) solid var(--theme-bg, var(--card-border-color)); &:first-child { @include border-radius(var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0); @@ -124,14 +123,34 @@ $card-body-gap: $card-spacer-y * .5 !default; .card-footer { padding: var(--card-cap-padding-y) var(--card-cap-padding-x); color: var(--card-cap-color); - background-color: var(--card-cap-bg); - border: var(--card-border-width) solid var(--card-border-color); + background-color: var(--theme-bg, var(--card-cap-bg)); + border: var(--card-border-width) solid var(--theme-bg, var(--card-border-color)); &:last-child { @include border-radius(0 0 var(--card-inner-border-radius) var(--card-inner-border-radius)); } } + .card-subtle { + border-color: var(--theme-border, var(--card-border-color)); + + .card-header { + color: var(--theme-text-emphasis, currentcolor); + background-color: var(--theme-bg-subtle, var(--card-cap-bg)); + border-color: var(--theme-border, var(--card-border-color)); + } + + .card-footer { + color: var(--theme-text-emphasis, currentcolor); + background-color: var(--theme-bg-subtle, var(--card-cap-bg)); + border-color: var(--theme-border, var(--card-border-color)); + } + + .card-body, + .card-list { + border-color: var(--theme-border, var(--card-border-color)); + } + } // // Header navs diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index ada051117035..0419e4b9bb4c 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -367,48 +367,25 @@ And with the reverse layout:
                `} /> -## Card styles +## Theme variants -Cards include various options for customizing their backgrounds, borders, and color. +Customize cards by using our theme color utilities. By default, cards use `bg` for their background and border colors when applying a theme color. Use `.card-subtle` to swap the background and border colors for a more subtle look. -### Background and color - -Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer. - - `
                -
                Header
                + `
                +
                ${themeColor.title}
                -

                ${themeColor.title} card title

                -

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

                -
                -
                `)} /> - -
                - -### Border - -Use [border utilities]([[docsref:/utilities/border]]) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card’s contents as shown below. - - `
                -
                Header
                -
                -

                ${themeColor.title} card title

                -

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

                +

                Card title

                +

                Card text…

                -
                `)} /> - -### Mixins utilities - -You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`. +
                `)} customMarkup={getData('theme-colors').map((themeColor) => `
                …
                `)} /> - -
                Header
                -
                -

                Success card title

                -

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

                + `
                +
                ${themeColor.title}
                +
                +

                Card title

                +

                Card text…

                -
                Footer
                -
                `} /> +
                `)} customMarkup={getData('theme-colors').map((themeColor) => `
                …
                `)} /> ## Card layout From 9a972cd2912a8362dee2c8eeb07da93d6b1820c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 21 Dec 2025 20:58:19 -0800 Subject: [PATCH 4/4] fix link --- site/src/content/docs/components/card.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index 0419e4b9bb4c..73869f17af54 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -6,7 +6,7 @@ toc: true import { getData } from '@libs/data' -Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. **Cards have no fixed width to start**, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various [sizing options](#sizing). +Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. **Cards have no fixed width to start**, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various [sizing options](#width).