fix(card): adding thumbnail slot, header styling for image / header c…

…ombo (#1207)

* fix(card): adding thumbnail slot, header styles

* feat(card): remove thumbnail slot, header slotting

* fix(card): adding gap to rh-card css, demo css

* chore: adding changeset

.changeset/lemon-llamas-kiss.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": minor
+---
+
+`rh-card`: `header` slot now displays items vertically instead of stacked, allowing for more than one item to display in the header.
+
+Example:
+
+```html
+<rh-card>
+  <img slot="header" src="kitten-400x250.jpeg"></img>
+  <h2 slot="header">Headline, sm</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Nullam eleifend elit sed est egestas, a sollicitudin mauris
+     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+  <rh-cta priority="primary" slot="footer">
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+```

elements/rh-card/demo/demo.css

@@ -36,7 +36,11 @@ rh-card.bar::part(header) {
 }
 
 rh-card.full::part(header) {
-  padding-inline: 0;
+  padding: 0;
+}
+
+rh-card.full :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
+  padding-inline: var(--rh-space-xl, 24px);
 }
 
 rh-card.full img {

elements/rh-card/demo/variants.html

@@ -113,4 +113,33 @@ <h2 slot="header">Headline, sm</h2>
       </rh-cta>
     </rh-card>
   </figure>
+
+  <figure>
+    <figcaption>Card with slotted image header. Full width image.</figcaption>
+    <rh-card class="full">
+      <img slot="header" src="kitten-400x250.jpeg"></img>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+         Nullam eleifend elit sed est egestas, a sollicitudin mauris
+         tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+         felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+      <rh-cta priority="primary" slot="footer">
+        <a href="#">Call to action</a>
+      </rh-cta>
+    </rh-card>
+  </figure>
+
+  <figure>
+    <figcaption>Card with slotted image header. Full width image.</figcaption>
+    <rh-card class="full">
+      <img slot="header" src="kitten-400x250.jpeg"></img>
+      <h2 slot="header">Headline, sm</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+         Nullam eleifend elit sed est egestas, a sollicitudin mauris
+         tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+         felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+      <rh-cta priority="primary" slot="footer">
+        <a href="#">Call to action</a>
+      </rh-cta>
+    </rh-card>
+  </figure>
 </div>

elements/rh-card/rh-card.css

@@ -12,8 +12,8 @@ article {
 
 [part="header"] {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  gap: var(--rh-space-lg, 16px);
 }
 
 [part="body"] ::slotted(:not([slot]):first-of-type) {
@@ -75,8 +75,6 @@ article {
 
 #header {
   box-sizing: border-box;
-  max-height: 200px;
-  overflow: hidden;
   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);