fix(card): collapse margins

Closes #1324

.changeset/rh-card-collapse-margins.md

@@ -0,0 +1,24 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: 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);
+}
+```

elements/rh-card/demo/grid.html

@@ -8,7 +8,7 @@ <h2 slot="header">Grid Card</h2>
   </rh-card>
 
   <rh-card>
-    <h2 slot="header">Grid Card with More Content</h2>
+    <h2 slot="header">Longer Content</h2>
     <p>
       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 @@ <h2 slot="header">Grid Card</h2>
       <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
     </rh-cta>
   </rh-card>
+
+  <rh-card>
+    <p>This card has no header and short body content.</p>
+    <rh-cta priority="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">No footer, More Content</h2>
+    <p>
+      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.
+    </p>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">No body</h2>
+    <rh-cta priority="primary" slot="footer">
+      <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
+    </rh-cta>
+  </rh-card>
 </div>
 
 <script type="module">
@@ -43,5 +68,6 @@ <h2 slot="header">Grid Card</h2>
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: var(--rh-space-lg, 16px);
+  max-width: 1058px;
 }
 </style>

elements/rh-card/rh-card.css

@@ -27,8 +27,6 @@ article {
 [part="footer"] {
   display: flex;
   gap: 0.5em;
-  inset-block-end: 0;
-  margin-block-start: auto;
 }
 
 .empty {
@@ -76,25 +74,29 @@ article {
 #header {
   box-sizing: border-box;
   font-size: var(--rh-card-header-font-size, var(--rh-font-size-heading-sm, 1.5rem));
-  padding-block: var(--rh-space-lg, 16px);
-  padding-inline: var(--rh-space-xl, 24px);
+  margin-block-start: var(--rh-space-lg, 16px);
+  margin-inline: var(--rh-space-xl, 24px);
 }
 
 #body {
-  padding: var(--rh-space-xl, 24px);
+  margin: var(--rh-space-xl, 24px);
 }
 
 #footer {
-  padding: var(--rh-space-xl, 24px);
+  margin-inline: var(--rh-space-xl, 24px);
+  margin-block-end: var(--rh-space-xl, 24px);
+  margin-block-start: auto;
 }
 
 @media screen and (min-width: 768px) {
   #body {
-    padding: var(--rh-space-2xl, 32px);
+    margin-block-start: var(--rh-space-2xl, 32px);
+    margin-inline: var(--rh-space-2xl, 32px);
   }
 
   #footer {
-    padding: var(--rh-space-2xl, 32px);
+    margin-inline: var(--rh-space-2xl, 32px);
+    margin-block-end: var(--rh-space-2xl, 32px);
   }
 }