{"success":true,"data":{"block":{"id":"feature-pattern-grid-links","name":"Feature Pattern Grid Links","title":"Feature Pattern Grid Links","category":"Features","categorySlug":"features","description":"Six-feature grid with pattern background and 'Learn more' links on each card. Each card has an icon, title, description, and arrow link. Pattern background adds visual interest.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290509/40d1g111cunmu14zbh6v5zrtue4o/feature-pattern-grid-links-desktop.png","mobile":"https://cdn.ing/assets/i/r/290508/deb0tzptizqki891fobp9ysj8iul/feature-pattern-grid-links-mobile.png"},"componentPath":"blocks/features/feature-pattern-grid-links.tsx","code":"import { FeaturePatternGridLinks } from \"@opensite/ui/blocks/features/feature-pattern-grid-links\";\n\nexport default function Demo() {\n  return (\n    <FeaturePatternGridLinks\n      title=\"Client Resources\"\n      description=\"Explore our comprehensive resources designed to help you make the most of our platform and accelerate your development process.\"\n      features={[\n        {\n          iconName: \"lucide/code-2\",\n          title: \"Component Library\",\n          description:\n            \"200+ production-ready components with full TypeScript support and documentation.\",\n          link: \"#\",\n          linkLabel: \"Browse Components\",\n        },\n        {\n          iconName: \"lucide/palette\",\n          title: \"Design System\",\n          description:\n            \"Comprehensive design tokens, patterns, and guidelines for consistent UX.\",\n          link: \"#\",\n          linkLabel: \"View Design System\",\n        },\n        {\n          iconName: \"lucide/book-open\",\n          title: \"Documentation\",\n          description:\n            \"In-depth guides, tutorials, and API references to help you get started.\",\n          link: \"#\",\n          linkLabel: \"Read the Docs\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Community\",\n          description:\n            \"Join thousands of developers building amazing products with our platform.\",\n          link: \"#\",\n          linkLabel: \"Join Community\",\n        },\n        {\n          iconName: \"lucide/layout-template\",\n          title: \"Templates\",\n          description:\n            \"Launch faster with pre-built templates for dashboards, marketing sites, and apps.\",\n          link: \"#\",\n          linkLabel: \"Browse Templates\",\n        },\n        {\n          iconName: \"lucide/plug\",\n          title: \"Integrations\",\n          description:\n            \"Connect your stack with first-class integrations for analytics, auth, and payments.\",\n          link: \"#\",\n          linkLabel: \"See Integrations\",\n        },\n        {\n          iconName: \"lucide/activity\",\n          title: \"Analytics\",\n          description:\n            \"Track adoption, performance, and engagement with real-time dashboards.\",\n          link: \"#\",\n          linkLabel: \"View Analytics\",\n        },\n        {\n          iconName: \"lucide/accessibility\",\n          title: \"Accessibility\",\n          description:\n            \"WCAG-aligned components with keyboard support, ARIA labels, and focus states.\",\n          link: \"#\",\n          linkLabel: \"Accessibility Guide\",\n        },\n        {\n          iconName: \"lucide/headset\",\n          title: \"Support\",\n          description:\n            \"Priority support, migration help, and best-practice reviews from our team.\",\n          link: \"#\",\n          linkLabel: \"Contact Support\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"xl\"\n      pattern=\"dots\"\n      patternOpacity={0.7}\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},"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},"features":{"type":"array","description":"Array of feature 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/zoom-in\")","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"linkLabel":{"type":"object","description":"Link label content","typeLabel":"React.ReactNode","required":false},"linkSlot":{"type":"object","description":"Custom link slot (overrides link and linkLabel)","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},"linkClassName":{"type":"string","description":"Additional CSS classes for the link","required":false}},"typeLabel":"FeaturePatternGridLinksItem"},"typeLabel":"FeaturePatternGridLinksItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (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},"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","pattern","links","six-column","icons","learn-more"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 3 (3, 6, or 9) since the layout is a 3-column grid. The demo uses 9 items. Each item requires a 'link' and 'linkLabel' for the CTA. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:40.050Z"}