diff --git a/.changeset/rh-card-collapse-margins.md b/.changeset/rh-card-collapse-margins.md new file mode 100644 index 0000000000..8dfebeb8d4 --- /dev/null +++ b/.changeset/rh-card-collapse-margins.md @@ -0,0 +1,24 @@ +--- +"@rhds/elements": patch +--- +``: collapses margins between header, body, and footer + +NOTE that this changes the default styling of the `header`, `body`, and `footer` +CSS Shadow Parts. They previously used `padding` for layout, and now use `margin`. +If you modified their padding via the `::part` selector, you will need to update your CSS + +Before: +```css +.special-card::part(header) { + padding: var(--rh-space-sm); +} +``` + +After: + +```css +.special-card::part(header) { + margin-block-start: var(--rh-space-sm); + margin-inline: var(--rh-space-sm); +} +``` diff --git a/elements/rh-card/demo/grid.html b/elements/rh-card/demo/grid.html index 16789309db..32c41ca0d0 100644 --- a/elements/rh-card/demo/grid.html +++ b/elements/rh-card/demo/grid.html @@ -8,7 +8,7 @@

Grid Card

-

Grid Card with More Content

+

Longer Content

In such a case, all of the grid card's footers should be vertically aligned. Meaning, they should always rest in @@ -31,6 +31,31 @@

Grid Card

Read the Guidelines
+ + +

This card has no header and short body content.

+ + Call to action + +
+ + +

No footer, More Content

+

+ In such a case, all of the grid card's footers should be + vertically aligned. Meaning, they should always rest in + the bottom of their card. Even when one card has much more + content than its neighbour, and thus fill more vertical space + in it's body, the footers should still be aligned. +

+
+ + +

No body

+ + Read the Guidelines + +