{"success":true,"data":{"block":{"id":"carousel-icon-tabs","name":"Carousel Icon Tabs","title":"Carousel Icon Tabs","category":"Gallery","categorySlug":"gallery","description":"A carousel with icon-based tab navigation and animated indicator. Features icon tabs that sync with carousel slides, animated underline indicator, and slide counter. Ideal for feature showcases, product tours, or any content that benefits from categorized visual navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/309641/q91xry8qvp8kmj6utc1faz4slvu7/carousel-icon-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/309642/n60pj7bqnhvswfr9wxyypwddvo8e/carousel-icon-tabs-mobile.jpg"},"componentPath":"blocks/gallery/carousel-icon-tabs.tsx","code":"import { CarouselIconTabs } from \"@opensite/ui/blocks/gallery/carousel-icon-tabs\";\n\nexport default function Demo() {\n  return (\n    <CarouselIconTabs\n      heading=\"Platform Features\"\n      badge=\"Enterprise Ready\"\n      sections={[\n        {\n          img: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\n          alt: \"Analytics Dashboard\",\n          title: \"Advanced Analytics\",\n          text: \"Comprehensive analytics dashboard with real-time data visualization, custom reports, and predictive insights. Track KPIs, user behavior, and business metrics in one unified platform.\",\n          icon: \"lucide/bar-chart-3\",\n        },\n        {\n          img: \"https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo\",\n          alt: \"Team Collaboration\",\n          title: \"Team Collaboration\",\n          text: \"Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.\",\n          icon: \"lucide/users\",\n        },\n        {\n          img: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\n          alt: \"API Integration\",\n          title: \"API Integration\",\n          text: \"Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.\",\n          icon: \"lucide/plug\",\n        },\n      ]}\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"badge":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"Array of tab sections to display","items":{"type":"object","description":"","fields":{"img":{"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 tab","typeLabel":"React.ReactNode","required":true},"text":{"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":"CarouselIconTabItem"},"typeLabel":"CarouselIconTabItem[]","required":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"sections[].img","roles":["gallery","feature"],"required":true}},"sectionsSlot":{"type":"object","description":"Custom slot for rendering sections (overrides sections array)","typeLabel":"React.ReactNode","required":false},"headerSlot":{"type":"object","description":"Custom slot for rendering the header","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},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabClassName":{"type":"string","description":"Additional CSS classes for each tab","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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":"Platform Features","badge":"Enterprise Ready","background":"white","pattern":"gridFadeTop","patternOpacity":0.9,"sections":[{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Analytics Dashboard","title":"Advanced Analytics","text":"Comprehensive analytics dashboard with real-time data visualization, custom reports, and predictive insights. Track KPIs, user behavior, and business metrics in one unified platform.","icon":"lucide/bar-chart-3"},{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team Collaboration","title":"Team Collaboration","text":"Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.","icon":"lucide/users"},{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"API Integration","title":"API Integration","text":"Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.","icon":"lucide/plug"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","tabs","icons","navigation","features","animated","indicator"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title text The 'badge' prop appears below the heading as a secondary badge – keep it short (2–4 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox – no extra configuration needed. Provide exactly 3 sections for ideal layout balance; fewer looks sparse, more crowds the tab row on desktop.","usageRequirements":{"requiredProps":["sections"],"requiresSiteCapabilities":["media_library"],"propConstraints":{"sections":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"sections[].img":{"path":"sections[].img","roles":["gallery","feature"],"required":true}}}}},"timestamp":"2026-06-27T20:11:19.302Z"}