From 46f98c8e2bd5f718a34f6edefe280d5c878ceeeb Mon Sep 17 00:00:00 2001
From: Calvin Jhunjhuwala <cjhunjhnuwala@gmail.com>
Date: Thu, 8 Jan 2026 14:08:51 -0800
Subject: [PATCH] updated and working showcase for call out media

---
 about/callout-media-banner-showcase.page.tsx  | 16 ++--
 .../CalloutMediaBanner.scss                   |  7 +-
 .../CalloutMediaBanner/CalloutMediaBanner.tsx | 74 +++++++++----------
 static/css/devportal2024-v1.css               |  7 +-
 4 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/about/callout-media-banner-showcase.page.tsx b/about/callout-media-banner-showcase.page.tsx
index df93323fed..70177bba43 100644
--- a/about/callout-media-banner-showcase.page.tsx
+++ b/about/callout-media-banner-showcase.page.tsx
@@ -312,18 +312,17 @@ export default function CalloutMediaBannerShowcase() {
             <PageGridRow>
               <PageGridCol span={12}>
                 <div className="mb-3">
-                  <strong>Tertiary Button Only</strong>
+                  <strong>No buttons</strong>
                   <br />
-                  <small className="text-muted">Softer, secondary action.</small>
+                  <small className="text-muted">Informational banner without call-to-action.</small>
                 </div>
               </PageGridCol>
             </PageGridRow>
           </PageGrid>
           <CalloutMediaBanner
             variant="lilac"
-            heading="Explore More"
-            subheading="Discover additional resources and information."
-            tertiaryButton={{ label: "Browse Resources", href: "#resources" }}
+            heading="The Compliant Ledger Protocol"
+            subheading="A decentralized public Layer 1 blockchain for creating, transferring, and exchanging digital assets with a focus on compliance."
           />
         </div>
 
@@ -333,17 +332,18 @@ export default function CalloutMediaBannerShowcase() {
             <PageGridRow>
               <PageGridCol span={12}>
                 <div className="mb-3">
-                  <strong>No Buttons</strong>
+                  <strong>No heading, buttons</strong>
                   <br />
-                  <small className="text-muted">Informational banner without call-to-action.</small>
+                  <small className="text-muted">Alternative informational banner without call-to-action.</small>
                 </div>
               </PageGridCol>
             </PageGridRow>
           </PageGrid>
           <CalloutMediaBanner
             variant="green"
-            heading="System Announcement"
             subheading="Important information or announcement without requiring user action."
+            primaryButton={{ label: "Take Action", href: "#action" }}
+            tertiaryButton={{ label: "Learn More", href: "#learn" }}
           />
         </div>
 
diff --git a/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss b/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss
index 556e030409..52f8c2f33d 100644
--- a/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss
+++ b/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss
@@ -57,15 +57,16 @@ $bds-cmb-image-overlay: rgba(0, 0, 0, 0.3);
   // Layout
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row; // Changed to row since this is a PageGridRow
   width: 100%;
   box-sizing: border-box;
   min-height: 280px;
-  height: auto; 
+  align-items: stretch; // Force children (PageGridCol) to stretch to full height
   
   // Ensure PageGridCol stretches to full height
   > [class*="bds-grid__col"] {
-    height: 100%;
+    display: flex; // Make column a flex container
+    flex-direction: column; // Stack content vertically
   }
   
   // Background positioning for image variant
diff --git a/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.tsx b/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.tsx
index 9cb98977e8..20caf6bacb 100644
--- a/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.tsx
+++ b/shared/patterns/CalloutMediaBanner/CalloutMediaBanner.tsx
@@ -9,7 +9,7 @@ export interface CalloutMediaBannerProps {
   /** Background image URL - overrides variant color when provided */
   backgroundImage?: string;
   /** Main heading text */
-  heading: string;
+  heading?: string;
   /** Subheading/description text */
   subheading: string;
   /** Primary button configuration */
@@ -88,43 +88,43 @@ export const CalloutMediaBanner: React.FC<CalloutMediaBannerProps> = ({
 
   return (
     <PageGrid containerWide={true}>
-    <PageGridRow className={classNames}>
-      <PageGridCol span={{base: 4, md: 6, lg: 8}}>
-        <div className="bds-callout-media-banner__content">
-          {/* Text Content */}
-          <div className="bds-callout-media-banner__text">
-            <h2 className="bds-callout-media-banner__heading">{heading}</h2>
-            <p className="bds-callout-media-banner__subheading">{subheading}</p>
-          </div>
-
-          {/* Buttons */}
-          {(primaryButton || tertiaryButton) && (
-            <div className="bds-callout-media-banner__actions">
-              {primaryButton && (
-                <Button
-                  variant="primary"
-                  color={buttonColor}
-                  href={primaryButton.href}
-                  onClick={primaryButton.onClick}
-                >
-                  {primaryButton.label}
-                </Button>
-              )}
-              {tertiaryButton && (
-                <Button
-                  variant="tertiary"
-                  color={buttonColor}
-                  href={tertiaryButton.href}
-                  onClick={tertiaryButton.onClick}
-                >
-                  {tertiaryButton.label}
-                </Button>
-              )}
+      <PageGridRow className={classNames}>
+        <PageGridCol span={{base: 4, md: 6, lg: 8}}>
+          <div className="bds-callout-media-banner__content">
+            {/* Text Content */}
+            <div className="bds-callout-media-banner__text">
+              {heading && <h2 className="bds-callout-media-banner__heading">{heading}</h2>}
+              <p className="bds-callout-media-banner__subheading">{subheading}</p>
             </div>
-          )}
-        </div>
-      </PageGridCol>
-    </PageGridRow>
+
+            {/* Buttons */}
+            {(primaryButton || tertiaryButton) && (
+              <div className="bds-callout-media-banner__actions">
+                {primaryButton && (
+                  <Button
+                    variant="primary"
+                    color={buttonColor}
+                    href={primaryButton.href}
+                    onClick={primaryButton.onClick}
+                  >
+                    {primaryButton.label}
+                  </Button>
+                )}
+                {tertiaryButton && (
+                  <Button
+                    variant="tertiary"
+                    color={buttonColor}
+                    href={tertiaryButton.href}
+                    onClick={tertiaryButton.onClick}
+                  >
+                    {tertiaryButton.label}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </PageGridCol>
+      </PageGridRow>
     </PageGrid>
   );
 };
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index f7d5f4d963..d049bb4e6d 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -16882,14 +16882,15 @@ html.light .bds-hero-split-media--accent .bds-hero-split-media__subtitle {
 .bds-callout-media-banner {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
   box-sizing: border-box;
   min-height: 280px;
-  height: auto;
+  align-items: stretch;
 }
 .bds-callout-media-banner > [class*=bds-grid__col] {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .bds-callout-media-banner {
   background-size: cover;