{"success":true,"data":{"block":{"id":"feature-bento-image-grid","name":"Feature Bento Image Grid","title":"Feature Bento Image Grid","category":"Features","categorySlug":"features","description":"Asymmetric bento-style grid with large and small image cards featuring gradient overlays and CTAs. One large card and two smaller cards with gradient overlays, icon badges, hover animations, and responsive layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293070/fjantr8kpa2nj6ygpiqb8l46jgws/cleanshot-2026-03-03-at-11-04-05.png","mobile":"https://cdn.ing/assets/i/r/293071/rfqkkwlaawkdubnhysqic8wrp56r/cleanshot-2026-03-03-at-11-04-22.png"},"componentPath":"blocks/features/feature-bento-image-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureBentoImageGrid } from \"@opensite/ui/blocks/features/feature-bento-image-grid\";\n\nexport default function Demo() {\n  return (\n    <FeatureBentoImageGrid\n      title=\"Platform Features\"\n      description=\"Discover the powerful capabilities that make our platform the choice of leading teams worldwide.\"\n      background=\"gray\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.4}\n      items={[\n        {\n          iconName: \"lucide/atom\",\n          iconBadge: \"AI\",\n          title: \"AI-Powered Development\",\n          linkText: \"Explore AI Features\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[42],\n          imageAlt: \"AI development tools\",\n          size: \"large\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          iconBadge: \"Security\",\n          title: \"Enterprise Security\",\n          linkText: \"View Security\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[65],\n          imageAlt: \"Security features\",\n          size: \"small\",\n        },\n        {\n          iconName: \"lucide/bar-chart-3\",\n          iconBadge: \"Analytics\",\n          title: \"Real-Time Analytics\",\n          linkText: \"See Analytics\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[88],\n          imageAlt: \"Analytics dashboard\",\n          size: \"small\",\n        },\n        {\n          iconName: \"lucide/zap\",\n          iconBadge: \"Performance\",\n          title: \"Lightning Fast\",\n          linkText: \"Check Performance\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[106],\n          imageAlt: \"Performance metrics\",\n          size: \"large\",\n        },\n      ]}\n      spacing=\"xl\"\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},"items":{"type":"array","description":"Array of grid 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/atom\")","required":false},"iconBadge":{"type":"object","description":"Icon badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Card title 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},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom image slot (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"size":{"type":"string","description":"Card size variant","typeLabel":"\"large\" | \"small\"","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconBadgeClassName":{"type":"string","description":"Additional CSS classes for the icon badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"linkTextClassName":{"type":"string","description":"Additional CSS classes for the link text","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureBentoImageGridItem"},"typeLabel":"FeatureBentoImageGridItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"largeCardClassName":{"type":"string","description":"Additional CSS classes for the large card","required":false},"smallCardClassName":{"type":"string","description":"Additional CSS classes for small cards","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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","bento","grid","images","gradient","overlay","asymmetric","modern"],"performance":{},"importantUsageNotes":"This is a bento layout — use exactly 4 items: 1 item with 'size: \"large\"' (renders as the dominant card) and 3 items with 'size: \"small\"'. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:11.070Z"}