CarouselCardList Pattern

A horizontal scrolling carousel pattern that displays CardOffgrid components with navigation buttons. Features responsive sizing, smooth scrolling, and full dark/light mode theming support.

• Horizontal scrolling card carousel with navigation buttons
• Automatic button enable/disable based on scroll position
• Two color variants: neutral and green (inherited by cards and buttons)
• Responsive card sizing across mobile, tablet, and desktop breakpoints
• Full dark mode and light mode support
• Heading and description constrained to page grid
• Hidden scrollbar with smooth scroll behavior
• Keyboard navigation and accessibility support

import { CarouselCardList } from 'shared/sections/CarouselCardList';

<CarouselCardList
  variant="neutral"
  heading="Why Build on the XRP Ledger"
  description="Discover the unique features that make XRPL ideal for your project."
  cards={[
    {
      icon: <TokenIcon />,
      title: "Native\nTokenization",
      description: "Issue and manage digital assets directly on the ledger.",
      href: "/docs/tokenization",
    },
    {
      icon: <WalletIcon />,
      title: "Low Cost\nTransactions",
      description: "Transaction costs are a fraction of a cent.",
      href: "/docs/fees",
    },
    // ... more cards
  ]}
/>

Each card in the cards array accepts the following properties (same as CardOffgridProps, excluding variant):

The default variant using gray color palette. Best for general purpose content sections.

<CarouselCardList
  variant="neutral"
  heading="Platform Features"
  description="Explore what makes our platform unique."
  cards={cards}
/>

Uses the brand green color palette. Best for featured or highlighted sections.

<CarouselCardList
  variant="green"
  heading="Enterprise Solutions"
  description="Purpose-built for institutional adoption."
  cards={cards}
/>

• Navigation buttons have descriptive aria-label attributes ("Previous cards", "Next cards")
• Carousel track has role="region" with aria-label="Card carousel"
• Keyboard navigation supported via Tab and arrow keys
• Focus ring visible on keyboard navigation (uses focus-visible)
• Disabled buttons properly convey state via disabled attribute and visual styling
• Cards support keyboard interaction (Tab, Enter, Space)

Neutral Variant:

• Button Enabled: $gray-300 (#CAD4DF)
• Button Hover: $gray-400 (#8A919A)
• Button Disabled: $gray-500 @ 50% opacity

Green Variant:

• Button Enabled: $green-300 (#21E46B)
• Button Hover: $green-200 (#70EE97)
• Button Disabled: $green-100 (#ACFFC5)

Neutral Variant:

• Button Enabled: $gray-300 (#CAD4DF)
• Button Hover: $gray-400 (#8A919A)
• Button Disabled: $gray-100 (#F0F3F7)

Green Variant:

• Button Enabled: $green-300 (#21E46B)
• Button Hover: $green-200 (#70EE97)
• Button Disabled: $green-100 (#ACFFC5)

View the pattern showcase at: /about/carousel-card-list-showcase

• Main Design: Section Carousel - Card List (Figma)
• Button States: Carousel Button States (Figma)