{"success":true,"data":{"block":{"id":"carousel-horizontal-cards","name":"Carousel Horizontal Cards","title":"Carousel Horizontal Cards","category":"Carousel","categorySlug":"carousel","description":"A horizontal scrolling card carousel with animated entrance effects, navigation buttons, and stat displays. Features smooth scroll behavior with dynamic button visibility based on scroll position.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295065/y51gs34zjnx8stiwwnorul7skddi/carousel-horizontal-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/295067/r5c5mmp9ltrtfztfit7sh2xk2kph/carousel-horizontal-cards-mobile.png"},"componentPath":"blocks/carousel/carousel-horizontal-cards.tsx","code":"import { CarouselHorizontalCards } from \"@opensite/ui/blocks/carousel/carousel-horizontal-cards\";\n\nexport default function Demo() {\n  return (\n    <CarouselHorizontalCards\n      heading=\"Trending Destinations\"\n      subtitle=\"Discover the world's most captivating travel experiences\"\n      headingHref=\"#\"\n      items={[\n        {\n          id: \"santorini\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          title: \"Santorini, Greece\",\n          count: \"2,847\",\n          countLabel: \"Travel Experiences\",\n        },\n        {\n          id: \"kyoto\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          title: \"Kyoto, Japan\",\n          count: \"3,192\",\n          countLabel: \"Cultural Tours\",\n        },\n        {\n          id: \"patagonia\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\",\n          title: \"Patagonia, Chile\",\n          count: \"1,563\",\n          countLabel: \"Adventure Activities\",\n        },\n        {\n          id: \"reykjavik\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n          title: \"Reykjavik, Iceland\",\n          count: \"2,104\",\n          countLabel: \"Northern Lights Tours\",\n        },\n        {\n          id: \"marrakech\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/rka4y4l9ihtuho5wjylbbaiyan5t\",\n          title: \"Marrakech, Morocco\",\n          count: \"1,876\",\n          countLabel: \"Cultural Experiences\",\n        },\n        {\n          id: \"queenstown\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/s45m6e1h7aeq23z9oiiquqjycl34\",\n          title: \"Queenstown, New Zealand\",\n          count: \"2,341\",\n          countLabel: \"Outdoor Adventures\",\n        },\n        {\n          id: \"barcelona\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/9fdc8a8f-a47b-5840-bb61-587c9c857a52\",\n          title: \"Barcelona, Spain\",\n          count: \"4,127\",\n          countLabel: \"City Tours\",\n        },\n        {\n          id: \"bali\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n          title: \"Bali, Indonesia\",\n          count: \"3,658\",\n          countLabel: \"Wellness Retreats\",\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Subtitle/description text","typeLabel":"React.ReactNode","required":false},"headingHref":{"type":"string","description":"URL for the heading link","required":false},"items":{"type":"array","description":"Array of card items","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the card","typeLabel":"string | number","required":true},"imageSrc":{"type":"string","description":"Image source URL","required":true},"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"count":{"type":"object","description":"Stat count value","typeLabel":"React.ReactNode","required":false},"countLabel":{"type":"object","description":"Label for the count","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for buttons/links on the card","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"CardItem"},"typeLabel":"CardItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Trending Destinations","subtitle":"Discover the world's most captivating travel experiences","headingHref":"#","background":"white","pattern":"diagonalCrossBasic","patternOpacity":0.7,"items":[{"id":"santorini","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","title":"Santorini, Greece","count":"2,847","countLabel":"Travel Experiences"},{"id":"kyoto","imageSrc":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw","title":"Kyoto, Japan","count":"3,192","countLabel":"Cultural Tours"},{"id":"patagonia","imageSrc":"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9","title":"Patagonia, Chile","count":"1,563","countLabel":"Adventure Activities"},{"id":"reykjavik","imageSrc":"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp","title":"Reykjavik, Iceland","count":"2,104","countLabel":"Northern Lights Tours"}]},"dependencies":["@opensite/ui"],"tags":["carousel","cards","horizontal","scroll","features","products","team","testimonials","stats"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each CardItem requires 'id' and 'imageSrc' absolute URL. Supports 4–12 cards; fewer cards may not show the scroll navigation buttons. 'count' and 'countLabel' display a stat below the card title. Per-card 'actions' array renders action buttons inside the card body. The header 'headingHref' adds a chevron-right link to the heading. 'background' defaults to 'white'.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:11:20.737Z"}