feat: better support "header only" card use

Author: brian-smith-tcril

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 (

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>
 ```
 

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));