{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CarouselFeatured","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":"carouselfeatured","__idx":0},"children":["CarouselFeatured"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A featured image carousel pattern with a two-column layout on desktop (image left, content right) and single-column layout on tablet/mobile (content top, image bottom). Features a heading, feature list with dividers, optional buttons, and navigation controls."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":1},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CarouselFeatured } from '@/shared/patterns/CarouselFeatured';\n\n<CarouselFeatured\n  slides={[\n    {\n      id: 1,\n      heading: \"Powered by Developers\",\n      features: [\n        { title: \"Easy-to-Integrate APIs\", description: \"Build with common languages...\" },\n        { title: \"Full Lifecycle Support\", description: \"From dev tools to deployment...\" },\n      ],\n      buttons: [\n        { label: \"Get Started\", href: \"/docs\" },\n        { label: \"Learn More\", href: \"/about\" }\n      ],\n      imageSrc: '/image1.jpg',\n      imageAlt: 'Slide 1'\n    },\n  ]}\n  background=\"grey\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":2},"children":["Props"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"required-props","__idx":3},"children":["Required 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":"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":["slides"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CarouselSlide[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of slides to display in the carousel"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"optional-props","__idx":4},"children":["Optional 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":"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":["background"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'grey' | 'neutral' | 'yellow'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'grey'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transition"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'slide' | 'fade'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'fade'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Slide transition style. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#transitions"},"children":["Transitions"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"transitions","__idx":5},"children":["Transitions"]},{"$$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":"Value"},"children":["Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Behavior"},"children":["Behavior"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'fade'"]}," (default)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Slides crossfade in place with no lateral movement. The image and heading lead, then the feature list, then the buttons, each on a 60ms stagger. Reads best when slides share a heading and only the supporting content changes — a horizontal wipe would drag the identical heading across the screen and set it back down where it started."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'slide'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Slides wipe horizontally. Opt into this when each slide is a genuinely distinct panel and the lateral movement communicates that."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Both styles collapse to an instant swap under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["prefers-reduced-motion: reduce"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'fade'"]}," stacks every slide in a single CSS grid cell, so the carousel still sizes"," ","to the tallest slide and won't change height between slides."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"type-definitions","__idx":6},"children":["Type Definitions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"carouselslide","__idx":7},"children":["CarouselSlide"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface CarouselSlide {\n  id: string | number;  // Unique identifier for the slide\n  heading: string;      // Heading text for the slide\n  features: CarouselFeatureItem[]; // Slide feature list\n  buttons?: ButtonConfig[]; // Optional slide buttons\n  imageSrc: string;     // Image source URL\n  imageAlt: string;     // Alt text for the image\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"carouselfeatureitem","__idx":8},"children":["CarouselFeatureItem"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface CarouselFeatureItem {\n  title: React.ReactNode;        // Feature title node\n  description: React.ReactNode;  // Feature description node\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buttonconfig","__idx":9},"children":["ButtonConfig"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  label: string;        // Button text\n  href?: string;        // Optional link URL\n  onClick?: () => void; // Optional click handler\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"background-variants","__idx":10},"children":["Background Variants"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component supports three background variants that adapt to light/dark mode:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["grey"]}]}," (default): Light mode: gray-200 (#E6EAF0), Dark mode: gray-300 (#CAD4DF)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}]},": Light mode: white (#FFF), Dark mode: black (#141414)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["yellow"]}]},": Light mode: yellow-100 (#F3F1EB), Dark mode: yellow-100 (#F3F1EB)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":11},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Layout"]},": Two-column on desktop (lg+), single-column on mobile/tablet"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Image Carousel"]},": Navigate through multiple slides with prev/next buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Auto-hide Navigation"]},": Navigation buttons automatically hide when only one slide is present"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Feature List"]},": Display multiple features with dividers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button Group"]},": Supports 1-2 buttons with validation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background Variants"]},": Three color options with light/dark mode support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility"]},": Proper ARIA labels for navigation buttons"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"layout-behavior","__idx":12},"children":["Layout Behavior"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"desktop-lg","__idx":13},"children":["Desktop (lg+)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image column on the left (6 columns)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Content column on the right (6 columns)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation buttons in header (desktop variant)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tabletmobile","__idx":14},"children":["Tablet/Mobile"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Content section at the top"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Image section at the bottom"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation buttons in CTA section (mobile variant)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":15},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#props"},"children":["Props"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#transitions"},"children":["Transitions"]}," sections above for the"," ","available configurations."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"notes","__idx":16},"children":["Notes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation buttons are automatically hidden when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["slides.length === 1"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons are validated using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validateButtonGroup"]}," with a maximum of 2 buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button colors are automatically adjusted based on the background variant"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The component uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," pattern for consistent button styling"]}]}]},"headings":[{"value":"CarouselFeatured","id":"carouselfeatured","depth":1},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Required Props","id":"required-props","depth":3},{"value":"Optional Props","id":"optional-props","depth":3},{"value":"Transitions","id":"transitions","depth":2},{"value":"Type Definitions","id":"type-definitions","depth":2},{"value":"CarouselSlide","id":"carouselslide","depth":3},{"value":"CarouselFeatureItem","id":"carouselfeatureitem","depth":3},{"value":"ButtonConfig","id":"buttonconfig","depth":3},{"value":"Background Variants","id":"background-variants","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Layout Behavior","id":"layout-behavior","depth":2},{"value":"Desktop (lg+)","id":"desktop-lg","depth":3},{"value":"Tablet/Mobile","id":"tabletmobile","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Notes","id":"notes","depth":2}],"frontmatter":{"seo":{"title":"CarouselFeatured"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/patterns/CarouselFeatured/README.md"},"lastModified":"2026-08-28T16:32:06.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/patterns/carouselfeatured/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}