From d3966730eec8f8a967e9f6919566a1237cf6d0f4 Mon Sep 17 00:00:00 2001
From: Brian Smith <bsmith@axim.org>
Date: Thu, 30 Oct 2025 22:59:01 -0400
Subject: [PATCH] feat!: better support "header only" card use

BREAKING CHANGE:
* Modified `pgn__card-header-content` styles
  * `margin-top` changed:
    * Before: 2x `var(--pgn-spacing-spacer-base)`
    * After: 1x `var(--pgn-spacing-spacer-base)`

BREAKING CHANGE:
* Modified `pgn__card-header-actions` styles
  * Children now centered
    * `display: flex` added
    * `align-items: center` added

BREAKING CHANGE:
* `pgn__card-wrapper-image-cap.vertical` modified
  * Bottom margin conditionally added when logo image is used. This replicates the spacing previously baked into `pgn__card-header-content`
    * `margin-bottom: var(--pgn-spacing-spacer-base)` added when logo image used
---
 src/Card/CardImageCap.jsx | 2 +-
 src/Card/README.md        | 5 +++++
 src/Card/index.scss       | 9 ++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index eb27d912b2..bda33e8f62 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -27,7 +27,7 @@ const CardImageCap = React.forwardRef(({
   const [showImageCap, setShowImageCap] = useState(false);
   const [showLogoCap, setShowLogoCap] = useState(false);
 
-  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}${showLogoCap ? ' with-logo' : ''}`;
 
   if (isLoading) {
     return (
diff --git a/src/Card/README.md b/src/Card/README.md
index a7ba05894d..32540083d1 100644
--- a/src/Card/README.md
+++ b/src/Card/README.md
@@ -157,12 +157,14 @@ This header displays a title, subtitle, and may contain actions.
 <div>
   <Card className="mb-2">
     <Card.Header title="Title" />
+    <Card.Footer />
   </Card>
   <Card>
     <Card.Header 
       title="Title"
       subtitle="Subtitle"
     />
+    <Card.Footer />
   </Card>
 </div>
 ```
@@ -191,6 +193,7 @@ The `Card.Header` supports custom actions via the actions prop and renders them
             </ActionRow>
           } 
         />
+        <Card.Footer />
       </Card>
       <Card>
         <Card.Header
@@ -214,6 +217,7 @@ The `Card.Header` supports custom actions via the actions prop and renders them
             </Dropdown>
           }
         />
+        <Card.Footer />
       </Card>
     </div>
 )}
@@ -235,6 +239,7 @@ Add ``size="sm"`` for smaller header content and actions.
     }
     size="sm"
   />
+  <Card.Footer />
 </Card>
 ```
 
diff --git a/src/Card/index.scss b/src/Card/index.scss
index 6107495867..155a919ac8 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -118,7 +118,7 @@ a.pgn__card {
     .pgn__card-header-content {
       display: flex;
       flex-direction: column;
-      margin-top: map.get($spacers, 4\.5);
+      margin-top: var(--pgn-spacing-spacer-base);
       overflow: auto;
       text-align: start;
       width: 100%;
@@ -164,6 +164,8 @@ a.pgn__card {
     }
 
     .pgn__card-header-actions {
+      display: flex;
+      align-items: center;
       margin-top: var(--pgn-spacing-spacer-base);
       margin-inline-start: var(--pgn-spacing-spacer-base);
       flex-shrink: 0;
@@ -334,8 +336,13 @@ a.pgn__card {
 
     &.vertical {
       max-height: var(--pgn-size-card-image-vertical-max-height);
+
+      &.with-logo {
+        margin-bottom: var(--pgn-spacing-spacer-base);
+      }
     }
 
+
     .pgn__card-image-cap-loader {
       .react-loading-skeleton {
         margin-bottom: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer));