{"success":true,"data":{"block":{"id":"carousel-icon-sidebar","name":"Carousel Icon Sidebar","title":"Carousel Icon Sidebar","category":"Gallery","categorySlug":"gallery","description":"A carousel with a dynamic icon sidebar panel in a two-column layout. Features a muted sidebar showing active slide details with icon, title, and description. Ideal for feature tours, product showcases, or any content that benefits from contextual sidebar information.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290115/2hcu6xhs71m2ubpktvjb0m9rusdf/carousel-icon-sidebar-desktop.png","mobile":"https://cdn.ing/assets/i/r/290114/n2iks1j8eyoskwzdfscupdfx04t7/carousel-icon-sidebar-mobile.png"},"componentPath":"blocks/gallery/carousel-icon-sidebar.tsx","code":"import { CarouselIconSidebar } from \"@opensite/ui/blocks/gallery/carousel-icon-sidebar\";\n\nexport default function Demo() {\n  return (\n    <CarouselIconSidebar\n      title=\"Our Key Features\"\n      description=\"Discover the standout features that set our platform apart. Each element is designed with your success in mind, ensuring a seamless and powerful experience.\"\n      items={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\",\n          alt: \"Elegant Design\",\n          title: \"Elegant Design\",\n          description:\n            \"Beautiful interfaces that users love. Our design philosophy combines aesthetics with usability to create experiences that delight.\",\n          icon: \"lucide/palette\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8\",\n          alt: \"High Performance\",\n          title: \"High Performance\",\n          description:\n            \"Lightning-fast applications optimized for speed. Every millisecond counts, and we ensure your users get the fastest experience possible.\",\n          icon: \"lucide/zap\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\",\n          alt: \"Secure by Default\",\n          title: \"Secure by Default\",\n          description:\n            \"Enterprise-grade security built into every layer. From encryption to authentication, we protect your data with industry best practices.\",\n          icon: \"lucide/shield-check\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\n          alt: \"Scalable Architecture\",\n          title: \"Scalable Architecture\",\n          description:\n            \"Infrastructure that grows with your business. Whether you have 100 or 100 million users, our platform handles it effortlessly.\",\n          icon: \"lucide/trending-up\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/t3k42fbzq7r7j93feldqm5cj1o1n\",\n          alt: \"24/7 Support\",\n          title: \"24/7 Support\",\n          description:\n            \"Expert support team available around the clock. Get help whenever you need it with response times under 30 minutes.\",\n          icon: \"lucide/headphones\",\n        },\n      ]}\n      background=\"gray\"\n      spacing=\"py-8 md:py-40\"\n      pattern=\"waves\"\n      patternOpacity={0.04}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Section title (displayed above the carousel)","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Section description (displayed above the carousel)","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of items to display","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":false},"title":{"type":"object","description":"Title of the item","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":true},"icon":{"type":"string","description":"Icon name for DynamicIcon","required":true},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"CarouselIconSidebarItem"},"typeLabel":"CarouselIconSidebarItem[]","required":false,"minItems":2,"maxItems":8,"mediaHints":{"path":"items[].src","roles":["gallery","feature"],"required":false}},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering the sidebar content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"sectionTitleClassName":{"type":"string","description":"Additional CSS classes for the section title","required":false},"sectionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the section description","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar panel","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the sidebar item title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the sidebar item description","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"title":"Our Key Features","description":"Discover the standout features that set our platform apart. Each element is designed with your success in mind.","background":"gray","spacing":"xl","items":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Elegant Design","title":"Elegant Design","description":"Beautiful interfaces that users love, combining aesthetics with usability.","icon":"lucide/palette"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"High Performance","title":"High Performance","description":"Lightning-fast applications optimised for speed. Every millisecond counts.","icon":"lucide/zap"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Secure by Default","title":"Secure by Default","description":"Enterprise-grade security built into every layer of the stack.","icon":"lucide/shield-check"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","icons","two-column","features","contextual","details"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description The sidebar panel uses card-style styling (shadow, border, bg-card). Do not override with conflicting background colours. Clicking any carousel image opens a built-in lightbox – this is automatic. Images render at a 4:3 aspect ratio inside the carousel. Landscape images work best. Provide at least 2 items; 4–6 is optimal for the sidebar navigation arrows to be useful. The optional 'title' and 'description' section-level props appear above the carousel as a header.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":2,"maxItems":8}},"mediaSlots":{"items[].src":{"path":"items[].src","roles":["gallery","feature"],"required":false}}}}},"timestamp":"2026-06-27T20:00:09.090Z"}