{"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 { 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: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\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: \"https://toastability-production.s3.amazonaws.com/u3p1hlbm2c1vvkwlm8h668pe132z\",\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: \"https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv\",\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,"minItems":2,"maxItems":5},"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}},"exampleProps":{"title":"Complete Development Platform","description":"From development to deployment and monitoring, everything you need.","background":"dark","pattern":"dashedGridFadeTop","patternOpacity":0.2,"slides":[{"id":"development","tabName":"Development","title":"Build Faster with Modern Tools","description":"Comprehensive development environment with everything you need.","features":["Hot module replacement for instant feedback","Built-in TypeScript support and type checking","Integrated testing framework with coverage reports"],"actions":[{"label":"Start Building","href":"#","variant":"default"}],"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Development environment"},{"id":"deployment","tabName":"Deployment","title":"Deploy to Production in Seconds","description":"Push your code and let our platform handle the rest.","features":["Zero-downtime deployments with instant rollbacks","Automatic SSL certificates and custom domains","Global CDN with 200+ edge locations"],"actions":[{"label":"View Deployment Guide","href":"#","variant":"default"}],"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Deployment pipeline"}],"defaultTab":"development"},"dependencies":["@opensite/ui"],"tags":["features","tabs","tabbed","interactive","images","checklist","cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Set 'defaultTab' to the 'id' of the initially active tab.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"slides":{"minItems":2,"maxItems":5}}}}},"timestamp":"2026-06-27T20:11:57.837Z"}