{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CarouselCardList 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":"carouselcardlist-pattern","__idx":0},"children":["CarouselCardList Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A horizontal scrolling carousel pattern that displays ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardOffgrid"]}," components with navigation buttons. Features responsive sizing, smooth scrolling, and full dark/light mode theming support."]},{"$$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":["Horizontal scrolling card carousel with navigation buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Automatic button enable/disable based on scroll position"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Two color variants: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}," (inherited by cards and buttons)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive card sizing across mobile, tablet, and desktop breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full dark mode and light mode support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Heading and description constrained to page grid"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Hidden scrollbar with smooth scroll behavior"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keyboard navigation and accessibility support"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":2},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CarouselCardList } from 'shared/sections/CarouselCardList';\n\n<CarouselCardList\n  variant=\"neutral\"\n  heading=\"Why Build on the XRP Ledger\"\n  description=\"Discover the unique features that make XRPL ideal for your project.\"\n  cards={[\n    {\n      icon: <TokenIcon />,\n      title: \"Native\\nTokenization\",\n      description: \"Issue and manage digital assets directly on the ledger.\",\n      href: \"/docs/tokenization\",\n    },\n    {\n      icon: <WalletIcon />,\n      title: \"Low Cost\\nTransactions\",\n      description: \"Transaction costs are a fraction of a cent.\",\n      href: \"/docs/fees\",\n    },\n    // ... more cards\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":3},"children":["Props"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"carouselcardlistprops","__idx":4},"children":["CarouselCardListProps"]},{"$$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":"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":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral' | 'green'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color variant for cards and navigation buttons"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section heading text"]}]},{"$$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":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section description text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CarouselCardConfig[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of card configurations"]}]},{"$$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":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes for the section"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"carouselcardconfig","__idx":5},"children":["CarouselCardConfig"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each card in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}," array accepts the following properties (same as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardOffgridProps"]},", excluding ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]},"):"]},{"$$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":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode | string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon component or image URL"]}]},{"$$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":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card title (use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\\n"]}," for line breaks)"]}]},{"$$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":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card description text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$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":["Link destination URL"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click handler function"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]},{"$$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":["Disabled state"]}]},{"$$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"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"variants","__idx":6},"children":["Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"neutral-variant","__idx":7},"children":["Neutral Variant"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default variant using gray color palette. Best for general purpose content sections."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CarouselCardList\n  variant=\"neutral\"\n  heading=\"Platform Features\"\n  description=\"Explore what makes our platform unique.\"\n  cards={cards}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green-variant","__idx":8},"children":["Green Variant"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Uses the brand green color palette. Best for featured or highlighted sections."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CarouselCardList\n  variant=\"green\"\n  heading=\"Enterprise Solutions\"\n  description=\"Purpose-built for institutional adoption.\"\n  cards={cards}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":9},"children":["Responsive Behavior"]},{"$$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":"Card Width"},"children":["Card Width"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Card Height"},"children":["Card Height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Card Padding"},"children":["Card Padding"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Button Size"},"children":["Button Size"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Mobile (< 576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["343px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["400px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["37px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tablet (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["356px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["440px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["20px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["37px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop (≥ 992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["400px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["480px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"spacing-tokens","__idx":10},"children":["Spacing Tokens"]},{"$$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":"Mobile"},"children":["Mobile"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Tablet"},"children":["Tablet"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Desktop"},"children":["Desktop"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Header gap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section gap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["24px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["32px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["40px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cards gap"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":11},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation buttons have descriptive ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," attributes (\"Previous cards\", \"Next cards\")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Carousel track has ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["role=\"region\""]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label=\"Card carousel\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keyboard navigation supported via Tab and arrow keys"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focus ring visible on keyboard navigation (uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus-visible"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Disabled buttons properly convey state via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}," attribute and visual styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards support keyboard interaction (Tab, Enter, Space)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-tokens","__idx":12},"children":["Design Tokens"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"colors-dark-mode---default","__idx":13},"children":["Colors (Dark Mode - Default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Neutral Variant:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Enabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Hover: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Disabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}," @ 50% opacity"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green Variant:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Enabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}," (#21E46B)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Hover: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-200"]}," (#70EE97)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Disabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-100"]}," (#ACFFC5)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"colors-light-mode---htmllight-","__idx":14},"children":["Colors (Light Mode - ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]},")"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Neutral Variant:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Enabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-300"]}," (#CAD4DF)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Hover: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]}," (#8A919A)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Disabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-100"]}," (#F0F3F7)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green Variant:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Enabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}," (#21E46B)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Hover: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-200"]}," (#70EE97)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button Disabled: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-100"]}," (#ACFFC5)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":15},"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-carousel-card-list"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base section container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list--neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Neutral color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list--green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__header"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Header wrapper (title, subtitle, nav)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__header-content"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title and subtitle wrapper"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__heading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section heading (uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".h-md"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section description (uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body-l"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__nav"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Navigation buttons wrapper"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__button"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Navigation button"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__button--prev"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Previous button modifier"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__button--disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Disabled button modifier"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__track-wrapper"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Scroll container wrapper"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__track"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Horizontal scroll track"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-carousel-card-list__card"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Individual card wrapper"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"showcase","__idx":16},"children":["Showcase"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["View the pattern showcase at: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/carousel-card-list-showcase"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":17},"children":["Design References"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Main Design:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/w0CVv1c40nWDRD27mLiMWS/Section-Carousel---Card-List?node-id=15055-3730&m=dev"},"children":["Section Carousel - Card List (Figma)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button States:"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/w0CVv1c40nWDRD27mLiMWS/Section-Carousel---Card-List?node-id=15055-1033&m=dev"},"children":["Carousel Button States (Figma)"]}]}]}]},"headings":[{"value":"CarouselCardList Pattern","id":"carouselcardlist-pattern","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"CarouselCardListProps","id":"carouselcardlistprops","depth":3},{"value":"CarouselCardConfig","id":"carouselcardconfig","depth":3},{"value":"Variants","id":"variants","depth":2},{"value":"Neutral Variant","id":"neutral-variant","depth":3},{"value":"Green Variant","id":"green-variant","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Spacing Tokens","id":"spacing-tokens","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Design Tokens","id":"design-tokens","depth":2},{"value":"Colors (Dark Mode - Default)","id":"colors-dark-mode---default","depth":3},{"value":"Colors (Light Mode - html.light )","id":"colors-light-mode---htmllight-","depth":3},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Showcase","id":"showcase","depth":2},{"value":"Design References","id":"design-references","depth":2}],"frontmatter":{"seo":{"title":"CarouselCardList Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/CarouselCardList/CarouselCardList.md"},"lastModified":"2026-02-23T23:00:18.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/carouselcardlist/carouselcardlist-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}