{"success":true,"data":{"block":{"id":"feature-tabbed-content-image","name":"Feature Tabbed Content Image","title":"Feature Tabbed Content Image","category":"Features","categorySlug":"features","description":"Tabbed interface with content and images that change based on selected tab. Each tab shows heading, description, checklist features, CTA button, and responsive image.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290507/zil95zfneqdgkhlcnfgxhhcdeff2/feature-tabbed-content-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290506/cqj6k1n736w6uib90dgr7yrbx0vr/feature-tabbed-content-image-mobile.png"},"componentPath":"blocks/features/feature-tabbed-content-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureTabbedContentImage } from \"@opensite/ui/blocks/features/feature-tabbed-content-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureTabbedContentImage\n      title=\"Complete Development Platform\"\n      description=\"From development to deployment and monitoring, everything you need to build and ship modern applications.\"\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.2}\n      slides={[\n        {\n          id: \"development\",\n          tabName: \"Development\",\n          title: \"Build Faster with Modern Tools\",\n          description:\n            \"Comprehensive development environment with everything you need to ship quality code quickly.\",\n          features: [\n            \"Hot module replacement for instant feedback and everything you need to ship quality code quickly.\",\n            \"Built-in TypeScript support and type checking\",\n            \"Integrated testing framework with coverage reports\",\n            \"Component library with 200+ pre-built blocks\",\n          ],\n          actions: [\n            {\n              label: \"Start Building\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[53],\n          imageAlt: \"Development environment\",\n        },\n        {\n          id: \"deployment\",\n          tabName: \"Deployment\",\n          title: \"Deploy to Production in Seconds\",\n          description:\n            \"Push your code and let our platform handle the rest. Automatic builds, tests, and global deployment.\",\n          features: [\n            \"Zero-downtime deployments with instant rollbacks\",\n            \"Automatic SSL certificates and custom domains\",\n            \"Global CDN with 200+ edge locations\",\n            \"Preview environments for every pull request\",\n          ],\n          actions: [\n            {\n              label: \"View Deployment Guide\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[79],\n          imageAlt: \"Deployment pipeline\",\n        },\n        {\n          id: \"monitoring\",\n          tabName: \"Monitoring\",\n          title: \"Real-Time Insights & Analytics\",\n          description:\n            \"Comprehensive observability with metrics, logs, and traces all in one place.\",\n          features: [\n            \"Real-time performance monitoring and alerts\",\n            \"Distributed tracing across your entire stack\",\n            \"Custom dashboards with advanced analytics\",\n            \"Integration with Datadog, New Relic, and more\",\n          ],\n          actions: [\n            {\n              label: \"Explore Monitoring\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[103],\n          imageAlt: \"Monitoring dashboard\",\n        },\n      ]}\n      defaultTab=\"development\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"slides":{"type":"array","description":"Array of tab slides","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier","typeLabel":"number | string","required":true},"tabName":{"type":"object","description":"Tab name content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Slide title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature bullet points (can be strings or FeatureTabbedContentImageFeatureItem objects)","items":{"type":"object","description":"","typeLabel":"string | FeatureTabbedContentImageFeatureItem"},"typeLabel":"string | FeatureTabbedContentImageFeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","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},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide content","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features list","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureTabbedContentImageSlide"},"typeLabel":"FeatureTabbedContentImageSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"defaultTab":{"type":"string","description":"Default active tab value","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 wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"tabsWrapperClassName":{"type":"string","description":"Additional CSS classes for the tabs wrapper","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs component","required":false},"tabsListClassName":{"type":"string","description":"Additional CSS classes for the tabs list","required":false},"tabTriggerClassName":{"type":"string","description":"Additional CSS classes for each tab trigger","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for each tab content","required":false},"contentGridClassName":{"type":"string","description":"Additional CSS classes for the content grid","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","tabs","tabbed","interactive","images","checklist","cta"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'slides' array. Each slide requires a valid real 'image' — do not use this block if you don't have real images for every slide. Each slide's 'features' array should contain 3–5 succinct strings or items to avoid overflow. Each slide's 'actions' array should follow the variant pattern: use 'default' for the first action and 'outline' for the second. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:23.731Z"}