{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"HeaderHeroPrimaryMedia 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":"headerheroprimarymedia-pattern","__idx":0},"children":["HeaderHeroPrimaryMedia Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A page-level hero pattern featuring a headline, subtitle, call-to-action buttons, and a primary media element. Supports images, videos, or custom React elements with enforced aspect ratios and object-fit constraints."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The HeaderHeroPrimaryMedia component provides a structured hero section with:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive headline and subtitle layout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Primary and optional secondary call-to-action buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media element (image, video, or custom) with responsive aspect ratios"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Development-time validation warnings"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":2},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import HeaderHeroPrimaryMedia from \"shared/sections/HeaderHeroPrimaryMedia/HeaderHeroPrimaryMedia\";\n\nfunction MyPage() {\n  return (\n    <HeaderHeroPrimaryMedia\n      headline=\"Build on XRPL\"\n      subtitle=\"Start developing today with our comprehensive developer tools.\"\n      links={[{ label: \"Get Started\", href: \"/docs\" }]}\n      media={{\n        type: \"image\",\n        src: \"/img/hero.png\",\n        alt: \"XRPL Development\",\n      }}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$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":"Required"},"children":["Required"]},{"$$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":["headline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero headline 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":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero subtitle text (label-l typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DesignConstrainedLink[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label, href }"]}," for ButtonGroup"]}]},{"$$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":["HeaderHeroMedia"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Media element (image, video, or custom)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["stacked"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Stack headline, subtitle, and buttons in one column. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},". See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#layout"},"children":["Layout"]}]}]},{"$$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":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes for the header element"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLHeaderElement attributes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML header attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"links-buttongroup","__idx":4},"children":["Links (ButtonGroup)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}," prop accepts an array of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label, href }"]}," objects for consistent ButtonGroup rendering; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}," are set by the component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["First link"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant=\"primary\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color=\"green\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Second link"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant=\"tertiary\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color=\"green\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Max 2 links supported (ButtonGroup validation)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"layout","__idx":5},"children":["Layout"]},{"$$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":"stacked"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["stacked"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Layout"},"children":["Layout"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (default)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Two columns: headline on the left (5 of 12 on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]},"), subtitle and buttons on the right. The headline bottom-aligns against the CTA column."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["One column (full width at base, 7 of 8 at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["md"]},", 9 of 12 at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]}," — note this grid is 4/8/12 columns by breakpoint, not 12 throughout): headline, then subtitle, then buttons, with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["16px"]}," between the headline and subtitle. The subtitle-to-buttons gap keeps the standard 24px (40px on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]},")."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroPrimaryMedia\n  stacked\n  headline=\"Build on the XRP Ledger\"\n  subtitle=\"Everything you need to get started.\"\n  media={{ type: \"image\", src: \"/hero.jpg\", alt: \"Hero\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Media placement is unchanged — it stays full-width below the text in both layouts."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"media-types","__idx":6},"children":["Media Types"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media"]}," prop accepts a discriminated union of three types:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"image-media","__idx":7},"children":["Image Media"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"image\",\n  src: string,        // Required\n  alt: string,        // Required\n  // ... all native <img> props except className and style\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"image\",\n  src: \"/img/hero.png\",\n  alt: \"Hero image\",\n  loading: \"lazy\",\n  decoding: \"async\"\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"video-media","__idx":8},"children":["Video Media"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"video\",\n  src: string,        // Required\n  alt?: string,       // Optional but recommended\n  // ... all native <video> props except className and style\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"video\",\n  src: \"/video/intro.mp4\",\n  alt: \"Introduction video\",\n  autoPlay: true,\n  loop: true,\n  muted: true,\n  playsInline: true\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-element-media","__idx":9},"children":["Custom Element Media"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"custom\",\n  element: React.ReactElement  // Required\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"media={{\n  type: \"custom\",\n  element: <MyAnimationComponent />\n}}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":10},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-secondary-cta","__idx":11},"children":["With Secondary CTA"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroPrimaryMedia\n  headline=\"Real-world asset tokenization\"\n  subtitle=\"Learn how to issue crypto tokens and build solutions.\"\n  links={[\n    { label: \"Get Started\", href: \"/docs\" },\n    { label: \"Learn More\", href: \"/about\" },\n  ]}\n  media={{\n    type: \"image\",\n    src: \"/img/tokenization.png\",\n    alt: \"Tokenization\",\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"video-media-1","__idx":12},"children":["Video Media"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroPrimaryMedia\n  headline=\"Watch and Learn\"\n  subtitle=\"Explore our video tutorials.\"\n  links={[{ label: \"Watch Tutorials\", href: \"/tutorials\" }]}\n  media={{\n    type: \"video\",\n    src: \"/video/intro.mp4\",\n    alt: \"Introduction video\",\n    autoPlay: true,\n    loop: true,\n    muted: true,\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-element","__idx":13},"children":["Custom Element"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<HeaderHeroPrimaryMedia\n  headline=\"Interactive Experience\"\n  subtitle=\"Engage with custom media.\"\n  links={[{ label: \"Explore\", href: \"/interactive\" }]}\n  media={{\n    type: \"custom\",\n    element: <MyAnimationComponent />,\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-constraints","__idx":14},"children":["Design Constraints"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component enforces specific design requirements:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Aspect Ratios"]},": Media maintains responsive aspect ratios:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Base: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16:9"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Medium (md+): ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["2:1"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Large (lg+): ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3:1"]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Object Fit"]},": All media uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object-fit: cover"]}," to fill the container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type Safety"]},": TypeScript discriminated unions ensure type-safe media selection"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"validation","__idx":15},"children":["Validation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component includes development-time validation that logs warnings to the console when required props are missing:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Missing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headline"]},": Component returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," (error logged)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Missing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media"]},": Warning logged, component still renders"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":16},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component generates the following CSS classes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media"]}," - Root header element"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media--stacked"]}," - Root modifier, present when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["stacked"]}," is set"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__stack"]}," - Single-column wrapper, only rendered when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["stacked"]}," is set"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__headline"]}," - Headline container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__subtitle"]}," - Subtitle element"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__cta-container"]}," - CTA container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__cta-buttons"]}," - CTA buttons wrapper"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__media-container"]}," - Media container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-header-hero-primary-media__media-element"]}," - Media element"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":17},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Media Selection"]},": Choose media that works well with the responsive aspect ratios (16:9 base, 2:1 md+, 3:1 lg+)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Alt Text"]},": Always provide meaningful alt text for images and videos"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Performance"]},": Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]}," for images below the fold"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CTAs"]},": Keep CTA text concise and action-oriented"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Headlines"]},": Keep headlines concise and impactful"]}]}]},"headings":[{"value":"HeaderHeroPrimaryMedia Pattern","id":"headerheroprimarymedia-pattern","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Links (ButtonGroup)","id":"links-buttongroup","depth":3},{"value":"Layout","id":"layout","depth":2},{"value":"Media Types","id":"media-types","depth":2},{"value":"Image Media","id":"image-media","depth":3},{"value":"Video Media","id":"video-media","depth":3},{"value":"Custom Element Media","id":"custom-element-media","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"With Secondary CTA","id":"with-secondary-cta","depth":3},{"value":"Video Media","id":"video-media-1","depth":3},{"value":"Custom Element","id":"custom-element","depth":3},{"value":"Design Constraints","id":"design-constraints","depth":2},{"value":"Validation","id":"validation","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Best Practices","id":"best-practices","depth":2}],"frontmatter":{"seo":{"title":"HeaderHeroPrimaryMedia Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/HeaderHeroPrimaryMedia/README.md"},"lastModified":"2026-08-18T23:49:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/headerheroprimarymedia/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}