{"success":true,"data":{"block":{"id":"feature-icon-tabs-content","name":"Feature Icon Tabs Content","title":"Feature Icon Tabs Content","category":"Features","categorySlug":"features","description":"Tabbed interface with icon triggers and content panels featuring images and CTAs. Centered header with icon tabs, muted background content area. Each tab has badge label, heading, description, CTA button, and image.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290497/v7fv84ieer1tavou9o6lb91pwfnn/feature-icon-tabs-content-desktop.png","mobile":"https://cdn.ing/assets/i/r/290496/0iaugarhjpyj5o0rv6mv95rmrh6j/feature-icon-tabs-content-mobile.png"},"componentPath":"blocks/features/feature-icon-tabs-content.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureIconTabsContent } from \"@opensite/ui/blocks/features/feature-icon-tabs-content\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconTabsContent\n      heading=\"Key Features\"\n      description=\"Discover the standout features that set our platform apart. From blazing-fast performance to enterprise-grade security, see how we deliver exceptional value to our users.\"\n      tabs={[\n        {\n          value: \"performance\",\n          iconName: \"lucide/zap\",\n          label: \"Performance\",\n          content: {\n            badge: \"Lightning Fast\",\n            title: \"Built for Speed\",\n            description:\n              \"Our infrastructure is optimized for sub-100ms response times globally. Automatic caching, edge computing, and intelligent routing ensure your users get the fastest experience possible.\",\n            imageSrc: imagePlaceholders[50],\n            imageAlt: \"Performance metrics\",\n            actions: [\n              {\n                label: \"View Benchmarks\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n        {\n          value: \"security\",\n          iconName: \"lucide/shield-check\",\n          label: \"Security\",\n          content: {\n            badge: \"Enterprise Ready\",\n            title: \"Security First Architecture\",\n            description:\n              \"Bank-level encryption, SOC 2 Type II compliance, automated security scanning, and regular penetration testing. Your data is protected by industry-leading security practices.\",\n            imageSrc: imagePlaceholders[74],\n            imageAlt: \"Security features\",\n            actions: [\n              {\n                label: \"Security Docs\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n        {\n          value: \"scalability\",\n          iconName: \"lucide/trending-up\",\n          label: \"Scalability\",\n          content: {\n            badge: \"Auto-Scaling\",\n            title: \"Grows With Your Business\",\n            description:\n              \"From zero to millions of users, our platform automatically scales to meet demand. No configuration needed - we handle the complexity so you can focus on building.\",\n            imageSrc: imagePlaceholders[97],\n            imageAlt: \"Scalability diagram\",\n            actions: [\n              {\n                label: \"Learn More\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n      ]}\n      defaultTab=\"performance\"\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.75}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"tabs":{"type":"array","description":"Array of tab configurations","items":{"type":"object","description":"","fields":{"value":{"type":"string","description":"Tab value identifier","required":true},"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/zap\")","required":false},"label":{"type":"object","description":"Tab label content","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Tab content configuration","fields":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for 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},"imageSrc":{"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 imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the content","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureIconTabsContentTabContent","required":false},"contentSlot":{"type":"object","description":"Custom slot for tab content (overrides content)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the tab trigger","required":false}},"typeLabel":"FeatureIconTabsContentTab"},"typeLabel":"FeatureIconTabsContentTab[]","required":false},"tabsSlot":{"type":"object","description":"Custom slot for rendering tabs (overrides tabs 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","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for each tab content","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","icons","interactive","images","cta","showcase"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'tabs' array. Each tab's 'content' object requires a valid real 'imageSrc' — do not use this block if you don't have real images for every tab panel. Each tab's 'content.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:42:10.868Z"}