{"success":true,"data":{"block":{"id":"carousel-demo-link","name":"Carousel Demo Link","title":"Carousel Demo Link","category":"Gallery","categorySlug":"gallery","description":"A carousel with a prominent demo link in the header section. Features navigation buttons, external demo link, and cards with images and descriptions. Ideal for product demos, feature showcases, or any content where you want to drive users to a live demo or external resource.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290125/jeqc5l75nl1ixofhqa3rm0wxuah3/carousel-demo-link-desktop.png","mobile":"https://cdn.ing/assets/i/r/290124/069z1pi3yo5q5jcjqmlsrcakqbvq/carousel-demo-link-mobile.png"},"componentPath":"blocks/gallery/carousel-demo-link.tsx","code":"import { CarouselDemoLink } from \"@opensite/ui/blocks/gallery/carousel-demo-link\";\n\nexport default function Demo() {\n  return (\n    <CarouselDemoLink\n      heading=\"Our Platform Solutions\"\n      demoAction={{\n        label: \"Book a demo\",\n        href: \"https://calendly.com/demo\",\n      }}\n      items={[\n        {\n          id: \"1\",\n          title: \"AI-Powered Analytics\",\n          summary:\n            \"Transform your data into actionable insights with our advanced machine learning platform. Real-time processing and predictive analytics.\",\n          url: \"/solutions/analytics\",\n          image: \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\",\n          imageAlt: \"Analytics platform interface\",\n        },\n        {\n          id: \"2\",\n          title: \"Cloud Infrastructure\",\n          summary:\n            \"Scalable, secure, and reliable cloud infrastructure designed for enterprise workloads. Auto-scaling and 99.99% uptime SLA.\",\n          url: \"/solutions/cloud\",\n          image: \"https://toastability-production.s3.amazonaws.com/s4vho0wfbjhf758oife8qfuekou8\",\n          imageAlt: \"Cloud infrastructure dashboard\",\n        },\n        {\n          id: \"3\",\n          title: \"Security Suite\",\n          summary:\n            \"Comprehensive security platform with real-time threat detection, compliance management, and zero-trust architecture.\",\n          url: \"/solutions/security\",\n          image: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          imageAlt: \"Security monitoring dashboard\",\n        },\n        {\n          id: \"4\",\n          title: \"Data Integration\",\n          summary:\n            \"Seamlessly connect all your data sources with our universal integration platform. Support for 200+ enterprise applications.\",\n          url: \"/solutions/integration\",\n          image: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\n          imageAlt: \"Data integration workflow\",\n        },\n        {\n          id: \"5\",\n          title: \"Business Intelligence\",\n          summary:\n            \"Interactive dashboards and real-time reporting tools that empower data-driven decision making across your organization.\",\n          url: \"/solutions/bi\",\n          image: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          imageAlt: \"Business intelligence dashboard\",\n        },\n      ]}\n      readMoreText=\"Learn more\"\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"p6\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"demoAction":{"type":"object","description":"Demo action configuration","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","required":false},"demoActionSlot":{"type":"object","description":"Custom slot for rendering the demo action (overrides demoAction prop)","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of card items to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the item","required":true},"title":{"type":"object","description":"Title of the card","typeLabel":"React.ReactNode","required":true},"summary":{"type":"object","description":"Summary/description text","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"Link URL for the card","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false}},"typeLabel":"CarouselDemoLinkItem"},"typeLabel":"CarouselDemoLinkItem[]","required":false,"minItems":3,"maxItems":8,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"required":false}},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for the \"Read more\" link","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"demoLinkClassName":{"type":"string","description":"Additional CSS classes for the demo link","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Our Platform Solutions","demoAction":{"label":"Book a demo","href":"https://calendly.com/demo"},"readMoreText":"Learn more","background":"white","spacing":"lg","items":[{"id":"1","title":"AI-Powered Analytics","summary":"Transform your data into actionable insights with advanced machine learning and predictive analytics.","url":"/solutions/analytics","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics platform interface"},{"id":"2","title":"Cloud Infrastructure","summary":"Scalable, secure cloud infrastructure for enterprise workloads with 99.99 % uptime SLA.","url":"/solutions/cloud","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure dashboard"},{"id":"3","title":"Security Suite","summary":"Comprehensive security with real-time threat detection and zero-trust architecture.","url":"/solutions/security","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security monitoring dashboard"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","demo","link","cta","products","features","external"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'demoAction' prop renders a styled link with an arrow icon. Pass '{ label, href }' at minimum; the 'href' should be an external URL (calendly, typeform, etc.). Each item uses a 'url' prop (not 'href') as the card link destination. The 'summary' field (not 'description') holds the card body text. Carousel items are 'basis-85%' on mobile and 'max-w-[452px]' on desktop – images should be landscape oriented. Provide 3–8 items; fewer than 3 makes the navigation arrows feel redundant.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":8}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}}},"timestamp":"2026-06-27T20:07:58.131Z"}