{"success":true,"data":{"block":{"id":"feature-icon-grid-muted","name":"Feature Icon Grid Muted","title":"Feature Icon Grid Muted","category":"Features","categorySlug":"features","description":"Five-feature grid with muted background and icon badges showcasing key capabilities. Muted background section with centered header and five-column grid of bordered cards with icons.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290487/nxbwvthsc5scybc93omyxysclpwb/feature-icon-grid-muted-desktop.png","mobile":"https://cdn.ing/assets/i/r/290486/2cf0e4wadrm4et4i982eh381ph6u/feature-icon-grid-muted-mobile.png"},"componentPath":"blocks/features/feature-icon-grid-muted.tsx","code":"import { FeatureIconGridMuted } from \"@opensite/ui/blocks/features/feature-icon-grid-muted\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconGridMuted\n      title=\"Key Features That Save You Time\"\n      description=\"Explore tools specifically built to enhance your workflow and boost productivity across your entire team.\"\n      features={[\n        {\n          iconName: \"lucide/check-circle-2\",\n          title: \"Instant Approvals\",\n          description:\n            \"Streamlined approval workflows with one-click confirmations and automated routing.\",\n        },\n        {\n          iconName: \"lucide/clock\",\n          title: \"Time Tracking\",\n          description:\n            \"Built-in time tracking that integrates seamlessly with your existing tools and workflows.\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Team Collaboration\",\n          description:\n            \"Real-time collaboration features that keep everyone on the same page, always.\",\n        },\n        {\n          iconName: \"lucide/file-text\",\n          title: \"Smart Documents\",\n          description:\n            \"Document management with version control, templates, and intelligent search.\",\n        },\n        {\n          iconName: \"lucide/bell\",\n          title: \"Highlight a Feature\",\n          description:\n            \"Intelligent alerts that surface what matters most and reduce notification fatigue.\",\n          className: \"col-span-1 md:col-span-2 bg-black text-white\",\n          titleClassName: \"text-white\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"muted\"\n      pattern=\"grid1\"\n      patternOpacity={1}\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},"features":{"type":"array","description":"Array of items to display","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/check-circle-2\")","required":false},"title":{"type":"object","description":"Item title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Item description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","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},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureIconGridMutedItem"},"typeLabel":"FeatureIconGridMutedItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering items (overrides features 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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","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","grid","icons","muted","five-column","capabilities","benefits"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 3 (3, 6, or 9) for clean 3-column grid alignment at large breakpoints. Individual items can use 'className' to span multiple columns (e.g., 'col-span-1 md:col-span-2') for visual accent, but only if intentional. Keep 'title' and 'description' for each item succinct to avoid card overflow. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:10.773Z"}