{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CalloutMediaBanner Component","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"calloutmediabanner-component","__idx":0},"children":["CalloutMediaBanner Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A full-width banner component featuring a heading, subheading, and optional action buttons. Designed for prominent page sections and hero areas with support for 5 color variants or custom background images."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":1},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["5 Color Variants"]},": Default (white), Light Gray, Lilac, Green, and Gray"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background Image Support"]},": Optional image with gradient overlay for text readability"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mode-Aware Background Images"]},": Optional separate image per color scheme (light vs dark)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Design"]},": Adapts across mobile, tablet, and desktop breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Buttons"]},": Pass 0, 1, or 2 button configs; variants are assigned by count"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Automatic Button Styling"]},": Intelligently selects button colors based on variant"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode Support"]},": Full light and dark mode compatibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Grid Integration"]},": Built-in PageGrid wrapper with wide container support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Vertical Centering"]},": Automatically centers text when no buttons are present"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":2},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically adapts its spacing and typography based on viewport width:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Breakpoint"},"children":["Breakpoint"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding"},"children":["Padding"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Content Gap"},"children":["Content Gap"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Heading Size"},"children":["Heading Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Subheading Size"},"children":["Subheading Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Min Height"},"children":["Min Height"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile (< 768px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["48px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["280px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (768px - 1023px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["36px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["28px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["280px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop (≥ 1024px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["80px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["360px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":3},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-mode","__idx":4},"children":["Light Mode"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Variant"},"children":["Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Background"},"children":["Background"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Text Color"},"children":["Text Color"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Button Color"},"children":["Button Color"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Inherits from parent"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["light-gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 200 (#E6EAF0)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac 300 (#C0A7FF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 200 (#70EE97)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 300 (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image"]}," (textColor='white')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background Image"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image"]}," (textColor='black')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background Image"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-mode","__idx":5},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Variant"},"children":["Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Background"},"children":["Background"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Text Color"},"children":["Text Color"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Button Color"},"children":["Button Color"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Inherits from parent"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["light-gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 700 (#343437)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac 400 (#7649E3)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300 (#21E46B)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 600 (#454549)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image"]}," (textColor='white')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background Image"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White (#FFFFFF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image"]}," (textColor='black')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background Image"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (#141414)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props-api","__idx":6},"children":["Props API"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface CalloutMediaBannerProps {\n  /** Color variant - determines background color (ignored if backgroundImage is provided) */\n  variant?: 'default' | 'light-gray' | 'lilac' | 'green' | 'gray';\n  /**\n   * Background image URL. Overrides `variant` when provided.\n   * Used in light mode, and also in dark mode unless `backgroundImageDark` is provided.\n   */\n  backgroundImage?: string;\n  /**\n   * Optional background image URL used when the site is in dark mode\n   * (i.e. `<html class=\"dark\">`). Falls back to `backgroundImage` if omitted.\n   */\n  backgroundImageDark?: string;\n  /** Text color for image variant - fixes text color across light/dark modes (only applicable when backgroundImage is provided) */\n  textColor?: 'white' | 'black';\n  /** Main heading text */\n  heading?: string;\n  /** Heading element type - h1 through h6 (defaults to h6) */\n  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Subheading/description text */\n  subheading: string;\n  /** Button configurations (1-2 buttons supported) */\n  buttons?: ButtonConfig[];\n  /** Additional CSS classes */\n  className?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-values","__idx":7},"children":["Default Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundImage"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textColor"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'white'"]}," (only used when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundImage"]}," is provided)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headingAs"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'h6'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buttonconfig","__idx":8},"children":["ButtonConfig"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Imported from the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/es-es/shared/patterns/buttongroup/readme"},"children":["ButtonGroup pattern"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  label: string;        // Button text\n  href?: string;        // Link destination\n  onClick?: () => void; // Click handler\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A maximum of 2 buttons is supported; the array is validated by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validateButtonGroup"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":9},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage-with-color-variant","__idx":10},"children":["Basic Usage with Color Variant"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CalloutMediaBanner } from 'shared/sections/CalloutMediaBanner';\n\n<CalloutMediaBanner\n  variant=\"green\"\n  heading=\"The Compliant Ledger Protocol\"\n  subheading=\"A decentralized public Layer 1 blockchain for creating, transferring, and exchanging digital assets with a focus on compliance.\"\n  buttons={[\n    { label: \"Get Started\", href: \"/docs\" },\n    { label: \"Learn More\", href: \"/about\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-background-image-white-text---default","__idx":11},"children":["With Background Image (White Text - Default)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  backgroundImage=\"/images/hero-bg.jpg\"\n  heading=\"Build on XRPL\"\n  subheading=\"Start building your next project on the XRP Ledger.\"\n  buttons={[{ label: \"Start Building\", onClick: handleClick }]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-background-image-black-text","__idx":12},"children":["With Background Image (Black Text)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  backgroundImage=\"/images/light-hero-bg.jpg\"\n  textColor=\"black\"\n  heading=\"Build on XRPL\"\n  subheading=\"Start building your next project on the XRP Ledger with black text that remains consistent across light and dark modes.\"\n  buttons={[{ label: \"Start Building\", onClick: handleClick }]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-mode-aware-background-images","__idx":13},"children":["With Mode-Aware Background Images"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass a separate image for each color scheme. The component swaps them purely"," ","in CSS (no JS re-render), so the change is instant when the user toggles"," ","between light and dark mode."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  backgroundImage=\"/img/backgrounds/callout-light.jpg\"\n  backgroundImageDark=\"/img/backgrounds/callout-dark.jpg\"\n  heading=\"Build on XRPL\"\n  subheading=\"Start building your next project on the XRP Ledger.\"\n  buttons={[{ label: \"Start Building\", href: \"/docs\" }]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you provide only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundImage"]},", that single image is used in both"," ","modes (backward-compatible default)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"single-button","__idx":14},"children":["Single Button"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  variant=\"light-gray\"\n  heading=\"Developer Resources\"\n  subheading=\"Access comprehensive documentation and tutorials.\"\n  buttons={[{ label: \"View Docs\", href: \"/docs\" }]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"no-buttons-informational","__idx":15},"children":["No Buttons (Informational)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  variant=\"lilac\"\n  heading=\"System Announcement\"\n  subheading=\"Important information or announcement without requiring user action.\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-click-handler","__idx":16},"children":["With Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner\n  variant=\"default\"\n  heading=\"Join the Community\"\n  subheading=\"Connect with developers, validators, and enthusiasts.\"\n  buttons={[\n    {\n      label: \"Join Discord\",\n      onClick: () => window.open('https://discord.gg/xrpl', '_blank')\n    },\n    { label: \"View Events\", href: \"/events\" }\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"important-implementation-details","__idx":17},"children":["Important Implementation Details"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"image-priority-logic","__idx":18},"children":["Image Priority Logic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundImage"]}," is provided, it ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["overrides"]}," the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}," prop:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Image is used as background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ No solid color background is applied"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Text color defaults to white (can be set to black via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textColor"]}," prop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Text color remains fixed across both light and dark modes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Gradient overlay is automatically added (dark overlay for white text, light overlay for black text)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-color-logic","__idx":19},"children":["Button Color Logic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Buttons automatically use the appropriate color based on the variant:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default variant"]},": Green buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Image variant"]},": Green buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["All other variants"]}," (light-gray, lilac, green, gray): Black buttons"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"vertical-alignment","__idx":20},"children":["Vertical Alignment"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["With buttons"]},": Text stays at top, buttons stick to bottom (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["justify-content: space-between"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Without buttons"]},": Text is vertically centered (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["justify-content: center"]},")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"grid-integration","__idx":21},"children":["Grid Integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["already wraps content in PageGrid structure"]},". Do not nest it inside another PageGrid:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["❌ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't do this:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<PageGrid>\n  <PageGridRow>\n    <PageGridCol span={12}>\n      <CalloutMediaBanner ... />  {/* Double-wrapped! */}\n    </PageGridCol>\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["✅ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Do this:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CalloutMediaBanner ... />  {/* Already includes PageGrid internally */}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":22},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bem-class-structure","__idx":23},"children":["BEM Class Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":".bds-callout-media-banner                    // Base banner\n.bds-callout-media-banner--default           // Inherits parent background; only text color is themed\n.bds-callout-media-banner--light-gray        // Light gray variant\n.bds-callout-media-banner--lilac             // Lilac variant\n.bds-callout-media-banner--green             // Green variant\n.bds-callout-media-banner--gray              // Gray variant\n.bds-callout-media-banner--image             // Background image variant (white text)\n.bds-callout-media-banner--image-text-black  // Background image with black text (fixed across modes)\n.bds-callout-media-banner--centered          // Centered content modifier\n.bds-callout-media-banner__content           // Content wrapper\n.bds-callout-media-banner__text              // Text container\n.bds-callout-media-banner__heading           // Heading element\n.bds-callout-media-banner__subheading        // Subheading element\n.bds-callout-media-banner__actions           // Button container\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typography-tokens","__idx":24},"children":["Typography Tokens"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Heading"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading-md"]}," type token (Tobias Light font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 40px / 46px line-height / -1px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 36px / 45px line-height / -0.5px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 32px / 40px line-height / 0px letter-spacing"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Subheading"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subhead-lg-r"]}," type token (Booton Regular font)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 32px / 40px line-height / -0.5px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 28px / 35px line-height / -0.75px letter-spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 24px / 30px line-height / -1px letter-spacing"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-tokens","__idx":25},"children":["Color Tokens"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All colors are sourced from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_colors.scss"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"// Backgrounds\ninherit       // Default variant (transparent — picks up parent's background)\n$gray-200     // Light Gray variant\n$lilac-300    // Lilac variant\n$green-200    // Green variant\n$gray-300     // Gray variant\n\n// Dark mode backgrounds\ninherit       // Default (dark) — also inherits from parent\n$gray-700     // Light Gray (dark)\n$lilac-400    // Lilac (dark)\n$green-300    // Green (dark)\n$gray-600     // Gray (dark)\n","lang":"scss"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":26},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Semantic HTML structure with proper heading hierarchy"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button components include ARIA labels"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keyboard navigation support through Button component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focus states with visible outlines"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sufficient color contrast in all variants"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":27},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"when-to-use-each-variant","__idx":28},"children":["When to Use Each Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Transparent banner that inherits its background from the surrounding section — use when you want the banner to blend into the page rather than introduce its own surface"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light Gray"]},": Subtle emphasis, softer than default"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Lilac"]},": Special announcements, feature highlights"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green"]},": Primary brand messaging, featured content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Gray"]},": Secondary content, less prominent sections"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Image"]},": Hero sections, high-impact visuals"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content-guidelines","__idx":29},"children":["Content Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Heading"]},": Keep concise (1-2 short lines), use sentence case"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Subheading"]},": Provide context (2-3 lines max), complete sentences"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Buttons"]},": Use action-oriented labels (\"Get Started\" not \"Click Here\")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button Count"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," assigns variants by count — a single button renders as primary, and with two buttons the first is primary and the second tertiary"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"image-guidelines","__idx":30},"children":["Image Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Minimum recommended resolution: 1920x600px for sharp display"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use images with clear focal points on the left/center"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text Color Selection"]},":",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textColor=\"white\""]}," (default) for dark or colorful images"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textColor=\"black\""]}," for light or bright images"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Text color remains fixed across both light and dark modes"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure sufficient contrast between image and text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Test with the automatic gradient overlay (dark for white text, light for black text)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":31},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CalloutMediaBanner.tsx"]}," - Component implementation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CalloutMediaBanner.scss"]}," - Styles with color variants and responsive breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.ts"]}," - Barrel exports"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["README.md"]}," - This documentation"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":32},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ButtonGroup"]},": Renders the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}," array and assigns each button's variant by count"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PageGrid"]},": Used internally for grid structure and wide container support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":33},"children":["Design References"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Figma Design"]},": ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/i4OuOX6QSBauMaJE4iY4kV/Callout---Media-Banner?node-id=1-2&m=dev"},"children":["Callout - Media Banner"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/callout-media-banner-showcase.page.tsx"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/CalloutMediaBanner/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":34},"children":["Version History"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initial implementation: January 2026"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Figma design alignment with 5 color variants + image support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive typography and spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic button color selection"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Vertical centering for text-only banners"]}]}]},"headings":[{"value":"CalloutMediaBanner Component","id":"calloutmediabanner-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Light Mode","id":"light-mode","depth":3},{"value":"Dark Mode","id":"dark-mode","depth":3},{"value":"Props API","id":"props-api","depth":2},{"value":"Default Values","id":"default-values","depth":3},{"value":"ButtonConfig","id":"buttonconfig","depth":3},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Usage with Color Variant","id":"basic-usage-with-color-variant","depth":3},{"value":"With Background Image (White Text - Default)","id":"with-background-image-white-text---default","depth":3},{"value":"With Background Image (Black Text)","id":"with-background-image-black-text","depth":3},{"value":"With Mode-Aware Background Images","id":"with-mode-aware-background-images","depth":3},{"value":"Single Button","id":"single-button","depth":3},{"value":"No Buttons (Informational)","id":"no-buttons-informational","depth":3},{"value":"With Click Handler","id":"with-click-handler","depth":3},{"value":"Important Implementation Details","id":"important-implementation-details","depth":2},{"value":"Image Priority Logic","id":"image-priority-logic","depth":3},{"value":"Button Color Logic","id":"button-color-logic","depth":3},{"value":"Vertical Alignment","id":"vertical-alignment","depth":3},{"value":"Grid Integration","id":"grid-integration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"BEM Class Structure","id":"bem-class-structure","depth":3},{"value":"Typography Tokens","id":"typography-tokens","depth":3},{"value":"Color Tokens","id":"color-tokens","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"When to Use Each Variant","id":"when-to-use-each-variant","depth":3},{"value":"Content Guidelines","id":"content-guidelines","depth":3},{"value":"Image Guidelines","id":"image-guidelines","depth":3},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Design References","id":"design-references","depth":2},{"value":"Version History","id":"version-history","depth":2}],"frontmatter":{"seo":{"title":"CalloutMediaBanner Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/CalloutMediaBanner/README.md"},"lastModified":"2026-08-25T04:24:09.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/calloutmediabanner/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}