{"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 { 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: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\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: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\",\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: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\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,"minItems":2,"maxItems":5},"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}},"exampleProps":{"title":"One Platform, Many Solutions","description":"Discover how our platform adapts to your unique needs.","tabs":[{"value":"marketing","iconName":"lucide/zap","label":"Marketing","content":{"badge":"Marketing","title":"Grow Your Audience Faster","description":"Powerful marketing tools to attract, engage, and convert visitors.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Marketing dashboard","actions":[{"label":"Explore Marketing","href":"#","variant":"default"}]}},{"value":"analytics","iconName":"lucide/bar-chart","label":"Analytics","content":{"badge":"Analytics","title":"Data-Driven Decisions","description":"Real-time analytics and insights to guide your strategy.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard","actions":[{"label":"Explore Analytics","href":"#","variant":"default"}]}},{"value":"automation","iconName":"lucide/settings","label":"Automation","content":{"badge":"Automation","title":"Work Smarter, Not Harder","description":"Automate repetitive tasks and free your team for what matters.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Automation workflow","actions":[{"label":"Explore Automation","href":"#","variant":"default"}]}}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","tabs","icons","interactive","images","cta","showcase"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description badge","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"tabs":{"minItems":2,"maxItems":5}}}}},"timestamp":"2026-06-27T20:13:32.037Z"}