ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2026-07-30 18:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated and working showcase for call out media

Browse Source
This commit is contained in:
Calvin Jhunjhuwala
2026-01-08 14:08:51 -08:00
parent c77ceaad62
commit 46f98c8e2b
4 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
about/callout-media-banner-showcase.page.tsx
View File

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

7
shared/patterns/CalloutMediaBanner/CalloutMediaBanner.scss
View File

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

74
shared/patterns/CalloutMediaBanner/CalloutMediaBanner.tsx
View File

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

7
static/css/devportal2024-v1.css
View File

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