{"success":true,"data":{"block":{"id":"link-page-grid-cards","name":"Link Page Grid Cards","title":"Link Page Grid Cards","category":"Link Page","categorySlug":"link-page","description":"A visually rich link page displaying links as a responsive grid of cards. Features profile header with avatar, links as cards with icons, labels and optional descriptions, hover effects with scale and shadow transitions, configurable 2 or 3 column layout, and social media links. Ideal for creators, businesses, and anyone who wants a more visual link page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306302/i0804qdw0ei2xc6248ueejiobc5q/link-page-grid-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306301/1d7yggc1mwxv5zimmkz5ql1vu39a/link-page-grid-cards-mobile.jpg"},"componentPath":"blocks/link-page/link-page-grid-cards.tsx","code":"import { LinkPageGridCards } from \"@opensite/ui/blocks/link-page/link-page-grid-cards\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkPageGridCards\n      name=\"Marcus Chen\"\n      bio=\"Product Designer & Digital Artist\"\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/308446/g4ykz8o4phw84yo9ly1lxhv0hqsd/logo-light.webp\",\n        alt: \"Marcus Chen\",\n      }}\n      socialLinks={[\n        {\n          id: \"1\",\n          href: \"https://instagram.com\",\n        },\n        {\n          id: \"2\",\n          href: \"https://twitter.com\",\n        },\n        {\n          id: \"3\",\n          href: \"https://linkedin.com\",\n        },\n        {\n          id: \"4\",\n          href: \"https://youtube.com\",\n        },\n      ]}\n      links={[\n        {\n          id: \"1\",\n          label: \"Design Work\",\n          description: \"View my portfolio\",\n          href: \"https://example.com/portfolio\",\n          iconName: \"lucide/palette\",\n        },\n        {\n          id: \"2\",\n          label: \"Case Studies\",\n          description: \"Deep dives into projects\",\n          href: \"https://example.com/case-studies\",\n          iconName: \"lucide/file-text\",\n        },\n        {\n          id: \"3\",\n          label: \"NFT Collection\",\n          description: \"Digital art drops\",\n          href: \"https://example.com/nft\",\n          iconName: \"lucide/sparkles\",\n        },\n        {\n          id: \"4\",\n          label: \"Design System\",\n          description: \"Open source toolkit\",\n          href: \"https://example.com/design-system\",\n          iconName: \"lucide/layers\",\n        },\n        {\n          id: \"5\",\n          label: \"Figma Templates\",\n          description: \"UI kits & resources\",\n          href: \"https://example.com/templates\",\n          iconName: \"lucide/layout-template\",\n        },\n        {\n          id: \"6\",\n          label: \"Contact\",\n          description: \"Let's collaborate\",\n          href: \"https://example.com/contact\",\n          iconName: \"lucide/send\",\n        },\n      ]}\n      columns={3}\n      footerAction={{\n        label: \"Built with OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/code-2\" size={16} />,\n      }}\n      spacing=\"xl\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.08}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false,"maxLength":140},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false,"mediaHints":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile header content","typeLabel":"React.ReactNode","required":false},"links":{"type":"array","description":"Array of links to display as cards","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false},"id":{"type":"string","description":"","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"GridCardLink"},"typeLabel":"GridCardLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"GridCardSocialLink"},"typeLabel":"GridCardSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"columns":{"type":"string","description":"Number of columns in the grid (2 or 3)","typeLabel":"2 | 3","required":false},"footerAction":{"type":"object","description":"Footer action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","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 outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the profile header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the links grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"cardIconWrapperClassName":{"type":"string","description":"Additional CSS classes for card icon wrapper","required":false},"cardIconClassName":{"type":"string","description":"Additional CSS classes for card icons","required":false},"cardLabelClassName":{"type":"string","description":"Additional CSS classes for card labels","required":false},"cardDescriptionClassName":{"type":"string","description":"Additional CSS classes for card descriptions","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"links[]":{"type":"object","description":"","required":false,"minItems":2,"maxItems":9},"links[].label":{"type":"object","description":"","required":true,"maxLength":30},"links[].description":{"type":"object","description":"","required":false,"maxLength":50},"links[].href":{"type":"object","description":"","required":true},"links[].iconName":{"type":"object","description":"","required":false},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8}},"exampleProps":{"name":"Marcus Chen","bio":"Product Designer & Digital Artist","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Marcus Chen"},"socialLinks":[{"id":"1","href":"https://instagram.com/marcuschen"},{"id":"2","href":"https://twitter.com/marcuschen"},{"id":"3","href":"https://linkedin.com/in/marcuschen"}],"columns":3,"links":[{"id":"1","label":"Design Work","description":"View my portfolio","href":"https://example.com/portfolio","iconName":"lucide/palette"},{"id":"2","label":"Case Studies","description":"Deep dives into projects","href":"https://example.com/case-studies","iconName":"lucide/file-text"},{"id":"3","label":"Design System","description":"Open source toolkit","href":"https://example.com/design-system","iconName":"lucide/layers"},{"id":"4","label":"Figma Templates","description":"UI kits & resources","href":"https://example.com/templates","iconName":"lucide/layout-template"},{"id":"5","label":"Blog","description":"Thoughts & tutorials","href":"https://example.com/blog","iconName":"lucide/pen-line"},{"id":"6","label":"Contact","description":"Let's collaborate","href":"https://example.com/contact","iconName":"lucide/send"}],"footerAction":{"label":"Built with OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"diagonalCrossFadeTop","patternOpacity":0.08},"dependencies":["@opensite/ui"],"tags":["link-page","grid","cards","visual","creative","business","portfolio","showcase","links"],"performance":{},"importantUsageNotes":"Displays links as a 2- or 3-column grid of cards, each with an icon, label, and optional description. Best for creators or businesses with 4–9 distinct destinations. columns=2 works well on mobile; columns=3 adds a third column on sm} ${screens. Each card has hover scale and shadow transitions. Social links appear above the grid. Profile avatar is typically a logo or portrait.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"columns":{"required":false,"note":"2 or 3; defaults to 2"},"links[]":{"required":false,"minItems":2,"maxItems":9},"links[].label":{"required":true,"maxLength":30},"links[].description":{"required":false,"maxLength":50},"links[].href":{"required":true},"links[].iconName":{"required":false,"note":"Iconify icon name displayed in a 48px square icon wrapper"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8}},"mediaSlots":{"avatar":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Card labels are short (≤30 chars) because they render in centered small text inside each card.","No featured link concept in this block; use link-tree-block if featured highlighting is needed."]}}},"timestamp":"2026-06-27T20:13:30.442Z"}