{"success":true,"data":{"block":{"id":"feature-image-cards-three-column","name":"Feature Image Cards Three Column","title":"Feature Image Cards Three Column","category":"Features","categorySlug":"features","description":"Three-column grid of image cards with gradient overlays, badges, and CTAs. Three equal-width cards with full-height images, gradient overlays, icon/avatar badges, hover animations, and call-to-action buttons.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290489/ve5mni4o86q5pyue90c2p7drstua/feature-image-cards-three-column-desktop.png","mobile":"https://cdn.ing/assets/i/r/290488/qm5z8jjoto3m4x4r44u8ga2vkkch/feature-image-cards-three-column-mobile.png"},"componentPath":"blocks/features/feature-image-cards-three-column.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureImageCardsThreeColumn } from \"@opensite/ui/blocks/features/feature-image-cards-three-column\";\n\nexport default function Demo() {\n  return (\n    <FeatureImageCardsThreeColumn\n      title=\"Featured Solutions\"\n      description=\"Tailored solutions designed to accelerate your development workflow and drive business growth.\"\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n      cards={[\n        {\n          iconName: \"lucide/zap\",\n          badgeText: \"Most Popular\",\n          title: \"Rapid Development\",\n          linkText: \"Learn More\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[39],\n          imageAlt: \"Rapid development workflow\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          badgeText: \"Enterprise\",\n          title: \"Security First\",\n          linkText: \"Explore Features\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[72],\n          imageAlt: \"Security features\",\n        },\n        {\n          iconName: \"lucide/trending-up\",\n          badgeText: \"Growth\",\n          title: \"Scale Seamlessly\",\n          linkText: \"See How\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[95],\n          imageAlt: \"Scalability features\",\n        },\n      ]}\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},"cards":{"type":"array","description":"Array of card items","items":{"type":"object","description":"","fields":{"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},"avatarSrc":{"type":"string","description":"Avatar image URL (alternative to icon)","required":false},"badgeText":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Card title content","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Card subtitle content","typeLabel":"React.ReactNode","required":false},"linkText":{"type":"object","description":"Link text content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"onClick":{"type":"object","description":"onClick handler for the card","typeLabel":"() => void","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 card","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},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for the link text","required":false}},"typeLabel":"FeatureImageCardsThreeColumnItem"},"typeLabel":"FeatureImageCardsThreeColumnItem[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for rendering cards (overrides cards array)","typeLabel":"React.ReactNode","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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","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},"cardAspectRatios":{"type":"object","description":"Media card aspect ratios","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"square\" | \"horizontal\" | \"vertical\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"square\" | \"horizontal\" | \"vertical\"","required":true}},"typeLabel":"{ desktop: \"square\" | \"horizontal\" | \"vertical\"; mobile: \"square\" | \"horizontal\" | \"vertical\"; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","cards","images","three-column","gradient","overlay","cta"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 items in the 'cards' array since the layout is a fixed 3-column grid. Only use this block if you have valid real images for every card — do not use placeholder/stock images. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:44:49.192Z"}