{"success":true,"data":{"block":{"id":"feature-integration-cards","name":"Feature Integration Cards","title":"Feature Integration Cards","category":"Features","categorySlug":"features","description":"Grid of integration cards with icons, descriptions, and visit website links. Centered header with four-column grid of bordered cards. Each card has icon badge, title, description, and external link button.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290499/w2avlqv85t2wr1qb4f12koj6fv7w/feature-integration-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290498/zheeyynltal4uogf7om2874n81dp/feature-integration-cards-mobile.png"},"componentPath":"blocks/features/feature-integration-cards.tsx","code":"import { brandLogoPlaceholders } from \"@/lib/media\";\nimport { FeatureIntegrationCards } from \"@opensite/ui/blocks/features/feature-integration-cards\";\n\nexport default function Demo() {\n  return (\n    <FeatureIntegrationCards\n      title=\"Powerful Integrations\"\n      description=\"Connect seamlessly with the tools your team already uses. One-click setup gets you started in minutes.\"\n      integrations={[\n        {\n          icon: brandLogoPlaceholders.black[0],\n          iconAlt: \"Integration logo\",\n          title: \"Slack\",\n          description:\n            \"Get real-time notifications and updates directly in your Slack channels.\",\n          link: \"#\",\n          linkLabel: \"Connect Slack\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[1],\n          iconAlt: \"Integration logo\",\n          title: \"GitHub\",\n          description:\n            \"Sync your repositories and automate workflows with GitHub Actions.\",\n          link: \"#\",\n          linkLabel: \"Connect GitHub\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[2],\n          iconAlt: \"Integration logo\",\n          title: \"Google Workspace\",\n          description:\n            \"Integrate with Gmail, Calendar, and Drive for seamless productivity.\",\n          link: \"#\",\n          linkLabel: \"Connect Google\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[3],\n          iconAlt: \"Integration logo\",\n          title: \"Salesforce\",\n          description:\n            \"Sync customer data and automate your sales workflow end-to-end.\",\n          link: \"#\",\n          linkLabel: \"Connect Salesforce\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.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},"integrations":{"type":"array","description":"Array of integration items","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Integration icon/logo URL","required":false},"iconAlt":{"type":"string","description":"Icon alt text","required":false},"iconSlot":{"type":"object","description":"Custom icon slot (overrides icon)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Integration title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Integration 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},"linkLabelSlot":{"type":"object","description":"Custom link label slot (overrides 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},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for the link label","required":false}},"typeLabel":"FeatureIntegrationCardsItem"},"typeLabel":"FeatureIntegrationCardsItem[]","required":false},"integrationsSlot":{"type":"object","description":"Custom slot for rendering integrations (overrides integrations 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},"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","integrations","cards","grid","icons","external-links","partners"],"performance":{},"importantUsageNotes":"Only use when block images will be logos or compact integration marks. The image slots are intentionally sized down for logos, so photos, screenshots, people, product imagery, and large illustrations will look poor."}},"timestamp":"2026-05-13T10:41:09.634Z"}