fix(card): hide header container when it's empty (#1558)

* fix(card): hide header container when it's empty Fixes #1383 * style: review
RedHat-UX · May 21, 2024 · 835a008 · 835a008
1 parent c189569
commit 835a008
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/plenty-rabbits-scream.md b/.changeset/plenty-rabbits-scream.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: hide header, body, or footer regions when they have no content
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
@@ -5,10 +5,6 @@ article {
   flex-direction: column;
 }
 
-.empty {
-  display: none;
-}
-
 ::slotted(*) {
   line-height: inherit !important;
 }
@@ -53,6 +49,12 @@ article {
   margin-inline: var(--rh-space-xl, 24px);
 }
 
+#header.empty,
+#footer.empty,
+#body.empty {
+  display: none;
+}
+
 #header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
 #body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
   font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);