{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardImage Component Documentation","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":"cardimage-component-documentation","__idx":0},"children":["CardImage Component Documentation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CardImage component is a responsive card implementation following the XRPL Brand Design System (BDS). It displays an image, title, subtitle, and call-to-action button with three responsive size variants that adapt to viewport width."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":2},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Three Responsive Variants"]},": LG (≥992px), MD (576px-991px), SM (<576px)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Interactive States"]},": Default, Hover, Focus, Pressed, Disabled"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button Animation on Card Hover"]},": Hovering the card triggers the button's hover animation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Usage"]},": Supports both link navigation and click handlers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility"]},": Keyboard navigation and screen reader support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props-api","__idx":3},"children":["Props API"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface CardImageProps {\n  /** Image source URL */\n  image: string;\n  /** Alt text for the image */\n  imageAlt: string;\n  /** Card title (1 line only) */\n  title: string;\n  /** Card subtitle (max 3 lines). `\\n` renders as a line break; an all-bullet subtitle renders as a list. */\n  subtitle: string;\n  /** Button label text */\n  buttonLabel: string;\n  /** Link destination (renders card as clickable link) */\n  href?: string;\n  /** Click handler for the button */\n  onClick?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Optional className for custom styling */\n  className?: string;\n  /** When true, image fills entire container with object-fit: cover (no visible background) */\n  fullBleed?: boolean;\n  /** Custom background color for image container (defaults to gray-100) */\n  backgroundColor?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-values","__idx":4},"children":["Default Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullBleed"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}," (falls back to the gray-100 image background)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"subtitle-formatting","__idx":5},"children":["Subtitle Formatting"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]}," is a plain string, but it is not rendered blindly:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Lines are split on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\\n"]},", and blank lines are dropped."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["every"]}," line begins with a bullet marker (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["•"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["*"]},"), the subtitle"," ","renders as a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<ul>"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-card-image__subtitle--list"]},") with one ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<li>"]}," per line."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Anything else renders as a single ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<p>"]},", where ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["white-space: pre-line"]}," means"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\\n"]}," still produces a visible line break."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Renders as a bulleted list\n<CardImage subtitle={\"• Fast settlement\\n• Low fees\\n• Built-in DEX\"} ... />\n\n// Renders as a paragraph with a line break\n<CardImage subtitle={\"Fast settlement.\\nLow fees.\"} ... />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"image-sizing","__idx":6},"children":["Image Sizing"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default the image sits in a fixed-height container against a gray-100"," ","background, preserving its aspect ratio."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullBleed"]}]}," — sets ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-card-image--full-bleed"]},", which drops the card's"," ","fixed height (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height: auto"]},") and makes the image fill the container using a"," ","1:1 aspect ratio with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object-fit: cover"]},". Use this when the image is the whole"," ","visual and you don't want letterboxing."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]}]}," — sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--bds-card-image-bg"]}," custom property on the"," ","image container, overriding the gray-100 default. Has no visible effect"," ","alongside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullBleed"]},", since the image covers the container."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardImage fullBleed image=\"/images/hero.png\" ... />\n<CardImage backgroundColor=\"#F3F1EB\" image=\"/images/logo.svg\" ... />\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-variants","__idx":7},"children":["Responsive Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lg-large---desktop-992px","__idx":8},"children":["LG (Large) - Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 620px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image height: 400px (1:1 aspect ratio preserved)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["3-column grid width"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"md-medium---tablet-576px---991px","__idx":9},"children":["MD (Medium) - Tablet (576px - 991px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 560px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image height: 280px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["2-column grid width"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"sm-small---mobile-576px","__idx":10},"children":["SM (Small) - Mobile (<576px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 536px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image height: 268px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["1-column grid width (full width)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"states","__idx":11},"children":["States"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-state","__idx":12},"children":["Default State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default interactive state with the button showing its primary green background."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hover-state","__idx":13},"children":["Hover State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the user hovers over the card:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button background fills from bottom-to-top (green-300 → green-200)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Arrow icon line shrinks"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between label and icon increases"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"focus-state","__idx":14},"children":["Focus State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the card receives keyboard focus:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Black border outline around the card"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button shows focus styling"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"pressed-state","__idx":15},"children":["Pressed State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the button is being pressed:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button returns to default styling momentarily"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":16},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled={true}"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card is non-interactive"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button shows disabled styling (gray background, no icon)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Text colors muted"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cursor changes to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["not-allowed"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":17},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-card-with-link","__idx":18},"children":["Basic Card with Link"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardImage } from 'shared/components/CardImage';\n\n<CardImage\n  image=\"/images/docs-hero.png\"\n  imageAlt=\"Documentation illustration\"\n  title=\"Documentation\"\n  subtitle=\"Access everything you need to get started working with the XRPL.\"\n  buttonLabel=\"Get Started\"\n  href=\"/docs\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-with-click-handler","__idx":19},"children":["Card with Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardImage\n  image=\"/images/feature.png\"\n  imageAlt=\"Feature illustration\"\n  title=\"New Feature\"\n  subtitle=\"Learn about our latest feature and how it can help you build better applications.\"\n  buttonLabel=\"Learn More\"\n  onClick={() => console.log('clicked')}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-card","__idx":20},"children":["Disabled Card"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardImage\n  image=\"/images/coming-soon.png\"\n  imageAlt=\"Coming soon\"\n  title=\"Coming Soon\"\n  subtitle=\"This feature is not yet available.\"\n  buttonLabel=\"Unavailable\"\n  disabled\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-with-custom-class","__idx":21},"children":["Card with Custom Class"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardImage\n  image=\"/images/hero.png\"\n  imageAlt=\"Hero image\"\n  title=\"Custom Styled\"\n  subtitle=\"Card with additional custom styling.\"\n  buttonLabel=\"Explore\"\n  href=\"/explore\"\n  className=\"my-custom-card\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-tokens","__idx":22},"children":["Design Tokens"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"spacing","__idx":23},"children":["Spacing"]},{"$$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":"Token"},"children":["Token"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]},{"$$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":["Image-to-content gap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gap between image and content area"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title-to-subtitle gap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["12px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gap between title and subtitle"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content horizontal padding"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Left/right padding for content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button margin-top"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["30px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Button locked to bottom"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border radius"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card corner radius"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"colors","__idx":24},"children":["Colors"]},{"$$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":"Element"},"children":["Element"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Light Mode"},"children":["Light Mode"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Dark Mode"},"children":["Dark Mode"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card background"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#FFFFFF"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 800"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card border"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 300 (#CAD4DF)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 700"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image background"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 100 (#F0F3F7)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 700"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text color"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#141414"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["White"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"typography","__idx":25},"children":["Typography"]},{"$$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":"Element"},"children":["Element"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Token"},"children":["Token"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Specs"},"children":["Specs"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".sh-md-l"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["28px/35px, -0.5px letter-spacing, light weight"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Subtitle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body-l"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["18px/26.1px, -0.5px letter-spacing, light weight"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":26},"children":["How It Works"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hover-animation","__idx":27},"children":["Hover Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card tracks hover state via React's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useState"]},". When hovered:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-card-image--hovered"]}," class is added to the card"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS rules target the nested Button component and apply hover styles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The button's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::before"]}," pseudo-element animates (background fill)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The arrow icon line shrinks via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["scaleX(0)"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This approach ensures the button animation triggers even when hovering areas of the card outside the button itself."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"link-navigation","__idx":28},"children":["Link Navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," is provided:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The entire card becomes clickable"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Clicking anywhere on the card navigates to the href"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The card is keyboard accessible (Enter/Space to activate)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-integration","__idx":29},"children":["Button Integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component uses the existing BDS Button component with:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant=\"primary\""]}," - Solid green background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color=\"green\""]}," - Green color theme"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":30},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"keyboard-navigation","__idx":31},"children":["Keyboard Navigation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tab"]},": Focus the card"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enter/Space"]},": Activate the card (navigate to href or trigger onClick)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"screen-reader-support","__idx":32},"children":["Screen Reader Support"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card has appropriate ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["role=\"link\""]}," when href is provided"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image has descriptive alt text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-disabled"]}," attribute for disabled state"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"file-structure","__idx":33},"children":["File Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"shared/components/CardImage/\n├── CardImage.tsx      # Component implementation\n├── CardImage.scss     # Component styles\n├── CardImage.md       # This documentation\n└── index.ts           # Exports\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":34},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button"]},": Used internally for the CTA button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CardOffgrid"]},": Similar card component with different layout"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"browser-support","__idx":35},"children":["Browser Support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component uses modern CSS features:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS Grid/Flexbox"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS transforms and transitions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus-visible"]}," pseudo-class"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-webkit-line-clamp"]}," for text truncation"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All features are widely supported in modern browsers."]}]},"headings":[{"value":"CardImage Component Documentation","id":"cardimage-component-documentation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Props API","id":"props-api","depth":2},{"value":"Default Values","id":"default-values","depth":3},{"value":"Subtitle Formatting","id":"subtitle-formatting","depth":2},{"value":"Image Sizing","id":"image-sizing","depth":2},{"value":"Responsive Variants","id":"responsive-variants","depth":2},{"value":"LG (Large) - Desktop (≥992px)","id":"lg-large---desktop-992px","depth":3},{"value":"MD (Medium) - Tablet (576px - 991px)","id":"md-medium---tablet-576px---991px","depth":3},{"value":"SM (Small) - Mobile (<576px)","id":"sm-small---mobile-576px","depth":3},{"value":"States","id":"states","depth":2},{"value":"Default State","id":"default-state","depth":3},{"value":"Hover State","id":"hover-state","depth":3},{"value":"Focus State","id":"focus-state","depth":3},{"value":"Pressed State","id":"pressed-state","depth":3},{"value":"Disabled State","id":"disabled-state","depth":3},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Card with Link","id":"basic-card-with-link","depth":3},{"value":"Card with Click Handler","id":"card-with-click-handler","depth":3},{"value":"Disabled Card","id":"disabled-card","depth":3},{"value":"Card with Custom Class","id":"card-with-custom-class","depth":3},{"value":"Design Tokens","id":"design-tokens","depth":2},{"value":"Spacing","id":"spacing","depth":3},{"value":"Colors","id":"colors","depth":3},{"value":"Typography","id":"typography","depth":3},{"value":"How It Works","id":"how-it-works","depth":2},{"value":"Hover Animation","id":"hover-animation","depth":3},{"value":"Link Navigation","id":"link-navigation","depth":3},{"value":"Button Integration","id":"button-integration","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Keyboard Navigation","id":"keyboard-navigation","depth":3},{"value":"Screen Reader Support","id":"screen-reader-support","depth":3},{"value":"File Structure","id":"file-structure","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Browser Support","id":"browser-support","depth":2}],"frontmatter":{"seo":{"title":"CardImage Component Documentation"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/CardImage/CardImage.md"},"lastModified":"2026-08-18T23:49:10.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/components/cardimage/cardimage-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}