+ {/* Hero Section */}
+
+
+
Pattern Showcase
+
CarouselCardList Pattern
+
+ A horizontal scrolling carousel that displays CardOffgrid components with navigation buttons.
+ Supports neutral and green color variants, responsive sizing, and dark/light mode theming.
+
+
+
+ {/* Feature Overview */}
+
+
+
+ Features
+
+
+
Layout
+
+ - Horizontal scrolling cards
+ - Navigation buttons (prev/next)
+ - Title constrained to grid
+ - Hidden scrollbar
+
+
+
+
Responsive Behavior
+
+ - Mobile: 343×400px cards
+ - Tablet: 356×440px cards
+ - Desktop: 400×480px cards
+
+
+
+
Button States
+
+ - Enabled / Disabled
+ - Hover / Active states
+ - Focus ring for keyboard nav
+
+
+
+
Theming
+
+ - Dark mode (default)
+ - Light mode (
html.light)
+ - Neutral & Green card variants
+ - Independent button colors (neutral, green, black)
+
+
+
+
+
+
+ {/* Neutral Cards + Neutral Buttons (Default) */}
+
+
+
+
+ Neutral Cards + Neutral Buttons (Default)
+
+ variant="neutral" - Gray cards with matching gray navigation buttons.
+
+
+
+
+
+
+
+
+
+ {/* Neutral Cards + Green Buttons */}
+
+
+
+
+ Neutral Cards + Green Buttons
+
+ variant="neutral" buttonVariant="green" - Gray cards with green navigation buttons.
+
+
+
+
+
+
+
+
+
+ {/* Neutral Cards + Black Buttons */}
+
+
+
+
+ Neutral Cards + Black Buttons
+
+ variant="neutral" buttonVariant="black" - Gray cards with black navigation buttons.
+
+
+
+
+
+
+
+
+
+ {/* Green Cards + Green Buttons */}
+
+
+
+
+ Green Cards + Green Buttons
+
+ variant="green" buttonVariant="green" - Green cards with matching green navigation buttons.
+
+
+
+
+
+
+
+
+
+ {/* Green Cards + Black Buttons */}
+
+
+
+
+ Green Cards + Black Buttons
+
+ variant="green" buttonVariant="black" - Green cards with black navigation buttons.
+
+
+
+
+
+
+
+
+
+ {/* Navigation Buttons */}
+
+
+
+ Navigation Button Specifications
+
+
+
+
Dimensions
+
+ - Desktop: 40px × 40px
+ - Tablet/Mobile: 37px × 37px
+ - Gap: 8px between buttons
+
+
+
+
Neutral Colors (Dark Mode)
+
+ - Enabled: $gray-500 (#72777E)
+ - Hover: $gray-400 (#8A919A)
+ - Disabled: $gray-500 @ 50%
+
+
+
+
Green Colors (Dark Mode)
+
+ - Enabled: $green-300 (#21E46B)
+ - Hover: $green-200 (#70EE97)
+ - Disabled: $green-500 @ 50%
+
+
+
+
Black Colors (Dark Mode)
+
+ - Enabled: $black (#141414)
+ - Hover: $gray-500 (#72777E)
+ - Disabled: $black @ 50%
+
+
+
+
+
+
+ {/* Spacing Tokens */}
+
+
+
+ Spacing Tokens
+
+
+
+
Token
+
Mobile
+
Tablet
+
Desktop
+
+
+
+
Header Gap
+
8px
+
8px
+
16px
+
+
+
+
+
Section Gap
+
24px
+
32px
+
40px
+
+
+
+
+
Cards Gap
+
8px
+
8px
+
8px
+
+
+
+
+
Card Dimensions
+
343×400px
+
356×440px
+
400×480px
+
+
+
+
+
Card Padding
+
16px
+
20px
+
24px
+
+
+
+
+
+ {/* API Reference */}
+
+
+
+ Component API
+
+ CarouselCardListProps
+
+
+
Prop
+
Type
+
Default
+
Description
+
+
+
+
variant
+
'neutral' | 'green'
+
'neutral'
+
Color variant for cards
+
+
+
+
+
buttonVariant
+
'neutral' | 'green' | 'black'
+
'neutral'
+
Color variant for navigation buttons (independent of cards)
+
+
+
+
+
heading
+
ReactNode
+
required
+
Section heading text
+
+
+
+
+
description
+
ReactNode
+
required
+
Section description text
+
+
+
+
+
cards
+
CarouselCardConfig[]
+
required
+
Array of card configurations
+
+
CarouselCardConfig
+ Each card in the cards array accepts the following properties (same as CardOffgrid, without variant):
+
+
+
Prop
+
Type
+
Required
+
Description
+
+
+
+
icon
+
ReactNode | string
+
Yes
+
Icon component or image URL
+
+
+
+
+
title
+
string
+
Yes
+
Card title (use \n for line breaks)
+
+
+
+
+
description
+
string
+
Yes
+
Card description text
+
+
+
+
+
href
+
string
+
No
+
Link destination URL
+
+
+
+
+
onClick
+
() => void
+
No
+
Click handler function
+
+
+
+
+
disabled
+
boolean
+
No
+
Disabled state
+
+
+
+
+
+ {/* Usage Example */}
+
+
+
+ Usage Example
+
+
+{`import { CarouselCardList } from 'shared/patterns/CarouselCardList';
+
+// Basic usage - button color matches card color by default
+,
+ title: "Native\\nTokenization",
+ description: "Issue and manage digital assets directly on the ledger.",
+ href: "/docs/tokenization",
+ },
+ // ... more cards
+ ]}
+/>
+
+// With independent button color
+`}
+
+
+
+
+
+ {/* Design References */}
+
+
+
+ Design References
+
+
+
+
+ Component Location:{' '}
+ shared/patterns/CarouselCardList/
+
+
+ Documentation:{' '}
+ shared/patterns/CarouselCardList/CarouselCardList.md
+
+
+