{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"HeaderHeroSplitMedia Pattern","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":"headerherosplitmedia-pattern","__idx":0},"children":["HeaderHeroSplitMedia Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A page-level hero pattern that pairs prominent editorial content with a primary media element in a split layout. Designed to introduce major concepts, products, or use cases while maintaining strong visual hierarchy and clear calls to action."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Header Hero Split Media supports both neutral and accent surface treatments and adapts responsively across desktop, tablet, and mobile breakpoints while preserving a consistent internal structure."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-to-use","__idx":2},"children":["When to Use"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The page represents a high priority destination or thematic entry point"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A strong headline and supporting narrative are required"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Visual media reinforces the concept or story being introduced"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["One or two clear primary actions should be immediately visible"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The page benefits from a balanced content and media relationship rather than a full bleed hero"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":3},"children":["Props"]},{"$$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":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default' | 'accent'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default uses no background surface behind the hero title. AccentSurface adds an accent background with internal padding behind the hero title"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layout"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'content-left' | 'content-right'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'content-left'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls whether the content block appears on the left or right side of the media"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero title text (display-md typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero subtitle text (subhead-sm-l typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Description text below title section (body-l typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["primaryCta"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label: string; href: string }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Primary CTA button configuration"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondaryCta"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label: string; href: string }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Secondary/Tertiary CTA button configuration"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ src: string; alt: string }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero media (image) configuration"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"variants","__idx":4},"children":["Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"theme","__idx":5},"children":["Theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Theme is automatically controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}," classes on the document root. The component will automatically adapt its colors based on the current theme."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Light"]},": White background with dark text (when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," is present)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark"]},": Dark background with light text (when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}," is present)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"surface","__idx":6},"children":["Surface"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Controls the hero title section styling."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": No background surface behind the hero title"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accent"]},": Adds a green accent background with internal padding behind the hero title and subtitle"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"layout","__idx":7},"children":["Layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Controls the position of content relative to media."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content Left"]}," (default): Content on the left, media on the right"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content Right"]},": Content on the right, media on the left"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":8},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { HeaderHeroSplitMedia } from '@/shared/patterns/HeaderHeroSplitMedia';\n\nfunction MyPage() {\n  return (\n    <HeaderHeroSplitMedia\n      title=\"Real-world asset tokenization\"\n      subtitle=\"Learn how to issue crypto tokens and build tokenization solutions with developer tools and APIs.\"\n      description=\"XRPL Payments Suite helps fintechs and payment providers move money fast, globally, and at low cost - all through simple APIs.\"\n      primaryCta={{ label: \"Get Started\", href: \"/docs/tutorials\" }}\n      secondaryCta={{ label: \"Learn More\", href: \"/about\" }}\n      media={{ src: \"/img/hero-tokenization.png\", alt: \"Tokenization illustration\" }}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":9},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-theme-with-accent-surface","__idx":10},"children":["Light Theme with Accent Surface"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The theme is automatically controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," class on the document root."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroSplitMedia\n  surface=\"accent\"\n  layout=\"content-left\"\n  title=\"Real-world asset tokenization\"\n  subtitle=\"Learn how to issue crypto tokens and build tokenization solutions.\"\n  description=\"XRPL helps fintechs move money fast, globally, at low cost.\"\n  primaryCta={{ label: \"Primary Link\", href: \"/docs\" }}\n  secondaryCta={{ label: \"Tertiary Link\", href: \"/learn\" }}\n  media={{ src: \"/img/hero.png\", alt: \"Hero\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-theme-with-accent-surface","__idx":11},"children":["Dark Theme with Accent Surface"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The theme is automatically controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}," class on the document root."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroSplitMedia\n  surface=\"accent\"\n  layout=\"content-left\"\n  title=\"Build on the XRP Ledger\"\n  subtitle=\"Start developing with the most sustainable blockchain.\"\n  description=\"Join thousands of developers building the future of finance.\"\n  primaryCta={{ label: \"Start Building\", href: \"/docs\" }}\n  secondaryCta={{ label: \"View Tutorials\", href: \"/tutorials\" }}\n  media={{ src: \"/img/hero-dark.png\", alt: \"XRPL Hero\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"content-right-layout","__idx":12},"children":["Content Right Layout"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroSplitMedia\n  surface=\"default\"\n  layout=\"content-right\"\n  title=\"Enterprise Solutions\"\n  subtitle=\"Scale your business with blockchain technology.\"\n  description=\"Leverage the XRP Ledger for enterprise-grade applications.\"\n  primaryCta={{ label: \"Contact Sales\", href: \"/contact\" }}\n  media={{ src: \"/img/enterprise.png\", alt: \"Enterprise\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-no-description-or-secondary-cta","__idx":13},"children":["Minimal (No Description or Secondary CTA)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroSplitMedia\n  title=\"Quick Start Guide\"\n  subtitle=\"Get up and running in minutes.\"\n  primaryCta={{ label: \"Begin\", href: \"/quickstart\" }}\n  media={{ src: \"/img/quickstart.png\", alt: \"Quick start\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":14},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"desktop-992px","__idx":15},"children":["Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Side-by-side layout with content and media columns (6/12 columns each)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media uses 1:1 aspect ratio"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between content and media columns: 8px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Horizontal gap between CTAs: 24px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between description and CTA: 40px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tablet-576px---991px","__idx":16},"children":["Tablet (576px - 991px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Side-by-side layout maintained (4/8 columns each)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media uses 2:1 aspect ratio (width:height)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between content and media columns: 32px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Horizontal gap between CTAs: 24px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between description and CTA: 24px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mobile-576px","__idx":17},"children":["Mobile (<576px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Stacked layout (content above media, 4/4 columns each = full width)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media uses 1:1 aspect ratio, full width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between content and media columns: 32px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CTAs stack vertically with 16px gap"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between description and CTA: 24px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accent-surface-spacing","__idx":18},"children":["Accent Surface Spacing"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["surface=\"accent\""]},", the title section receives a green background with specific padding:"]},{"$$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 Top"},"children":["Padding Top"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding Left/Right"},"children":["Padding Left/Right"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding Bottom"},"children":["Padding Bottom"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"anatomy","__idx":19},"children":["Anatomy"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"HeaderHeroSplitMedia\n├── PageGrid Container (responsive padding)\n│   └── PageGrid.Row (flex layout with custom gap)\n│       ├── PageGrid.Col (content column)\n│       │   └── Content\n│       │       ├── TitleSurface (optional accent background)\n│       │       │   └── TitleGroup\n│       │       │       ├── Title (h1, display-md)\n│       │       │       └── Subtitle (p, sh-sm-l)\n│       │       └── DescriptionGroup\n│       │           ├── Description (p, body-l)\n│       │           └── CTA\n│       │               ├── Primary Button\n│       │               └── Tertiary Button\n│       └── PageGrid.Col (media column)\n│           └── Media\n│               └── Image (object-fit: cover)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"cta-guidelines","__idx":20},"children":["CTA Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use Primary and Tertiary buttons only"]}," - Do not use Secondary buttons in this pattern"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Secondary buttons introduce competing visual shapes and reduce clarity"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Using Primary and Tertiary maintains clean hierarchy and avoids visual noise"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"media-guidelines","__idx":21},"children":["Media Guidelines"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Width is always used as the anchor when calculating height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media spans the grid width defined by the layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Aspect ratio rules by breakpoint:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 1:1 ratio"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 2:1 ratio (W:H)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 1:1 ratio"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":22},"children":["CSS Classes"]},{"$$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":"Class"},"children":["Class"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Root element"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media--default"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default surface modifier"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media--accent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accent surface modifier"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media--content-left"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content left layout"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media--content-right"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content right layout"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__container"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PageGrid container with responsive vertical padding"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__row"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PageGrid.Row with custom gap spacing"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__content-col"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PageGrid.Col wrapper for content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__content"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content column"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__title-surface"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title background wrapper"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__title-group"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title + subtitle container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Main heading"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__subtitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Subtitle text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__description-group"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Description + CTA container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Body text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__cta"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CTA buttons container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__media-col"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PageGrid.Col wrapper for media"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Media column"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-hero-split-media__media-img"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Media image"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," This pattern uses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid"]}," component system. The container uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-grid__container"]},"), rows use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Row"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-grid__row"]},"), and columns use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid.Col"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-grid__col-*"]},"). Custom classes are applied for pattern-specific styling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":23},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses semantic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<section>"]}," element for the pattern container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Title uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<h1>"]}," heading for proper document structure"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}," text for screen readers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons inherit accessible labels from the Button component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Color contrast ratios meet WCAG 2.1 AA standards"]}]}]},"headings":[{"value":"HeaderHeroSplitMedia Pattern","id":"headerherosplitmedia-pattern","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"When to Use","id":"when-to-use","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Variants","id":"variants","depth":2},{"value":"Theme","id":"theme","depth":3},{"value":"Surface","id":"surface","depth":3},{"value":"Layout","id":"layout","depth":3},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Light Theme with Accent Surface","id":"light-theme-with-accent-surface","depth":3},{"value":"Dark Theme with Accent Surface","id":"dark-theme-with-accent-surface","depth":3},{"value":"Content Right Layout","id":"content-right-layout","depth":3},{"value":"Minimal (No Description or Secondary CTA)","id":"minimal-no-description-or-secondary-cta","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Desktop (≥992px)","id":"desktop-992px","depth":3},{"value":"Tablet (576px - 991px)","id":"tablet-576px---991px","depth":3},{"value":"Mobile (<576px)","id":"mobile-576px","depth":3},{"value":"Accent Surface Spacing","id":"accent-surface-spacing","depth":2},{"value":"Anatomy","id":"anatomy","depth":2},{"value":"CTA Guidelines","id":"cta-guidelines","depth":2},{"value":"Media Guidelines","id":"media-guidelines","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Accessibility","id":"accessibility","depth":2}],"frontmatter":{"seo":{"title":"HeaderHeroSplitMedia Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/HeaderHeroSplitMedia/HeaderHeroSplitMedia.md"},"lastModified":"2026-02-23T23:00:18.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/headerherosplitmedia/headerherosplitmedia-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}