{"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 { 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: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\",\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: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\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: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\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},"items":{"type":"object","description":"","minItems":3,"maxItems":3}},"exampleProps":{"title":"Feature Highlights","description":"Three powerful capabilities that set us apart.","items":[{"iconName":"lucide/zap","badgeText":"Performance","title":"Lightning Fast","subtitle":"Sub-100ms response times globally.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Performance metrics","linkText":"Learn more","link":"/features/performance"},{"iconName":"lucide/shield","badgeText":"Security","title":"Zero-Trust Security","subtitle":"Every request authenticated and encrypted.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security architecture","linkText":"Learn more","link":"/features/security"},{"iconName":"lucide/bar-chart","badgeText":"Analytics","title":"Real-Time Insights","subtitle":"Live data dashboards for your entire stack.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard","linkText":"Learn more","link":"/features/analytics"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","cards","images","three-column","gradient","overlay","cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each card can use either 'iconName' (format 'prefix/name') or 'avatarSrc' (URL) for the card icon. badgeText title subtitle linkText","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":3}}}}},"timestamp":"2026-06-27T20:15:33.600Z"}