{"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,"minItems":3,"maxItems":8},"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}},"exampleProps":{"title":"Powerful Integrations","description":"Connect seamlessly with the tools your team already uses. One-click setup gets you started in minutes.","integrations":[{"icon":"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png","iconAlt":"Slack logo","title":"Slack","description":"Get real-time notifications directly in your Slack channels.","link":"#","linkLabel":"Connect Slack"},{"icon":"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png","iconAlt":"GitHub logo","title":"GitHub","description":"Sync repositories and automate workflows with GitHub Actions.","link":"#","linkLabel":"Connect GitHub"},{"icon":"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png","iconAlt":"Google Workspace logo","title":"Google Workspace","description":"Integrate with Gmail, Calendar, and Drive.","link":"#","linkLabel":"Connect Google"},{"icon":"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png","iconAlt":"Salesforce logo","title":"Salesforce","description":"Sync customer data and automate your sales workflow.","link":"#","linkLabel":"Connect Salesforce"}],"background":"dark","pattern":"diagonalCrossBasic","patternOpacity":0.1},"dependencies":["@opensite/ui"],"tags":["features","integrations","cards","grid","icons","external-links","partners"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'iconAlt' for accessibility text on the logo image. Supports 'link' and 'linkLabel' on each card for a 'Connect' CTA.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"integrations":{"minItems":3,"maxItems":8}}}}},"timestamp":"2026-06-27T20:05:29.405Z"}