{"success":true,"data":{"block":{"id":"link-page-bento-layout","name":"Link Page Bento Layout","title":"Link Page Bento Layout","category":"Link Page","categorySlug":"link-page","description":"A modern bento grid style link page with visual hierarchy. Features profile header with avatar, bento grid layout with featured links in larger cells with optional background images, regular links in smaller cells, and social media links. Creates visual hierarchy by making featured links more prominent. Ideal for digital creators, entrepreneurs, and anyone wanting a trendy, modern link page design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306303/zl5j4j1jiot8c5bko9jtn7fipiys/link-page-bento-layout-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306304/rzwk5bwuejcatcts867h6no5rdcn/link-page-bento-layout-mobile.jpg"},"componentPath":"blocks/link-page/link-page-bento-layout.tsx","code":"import { LinkPageBentoLayout } from \"@opensite/ui/blocks/link-page/link-page-bento-layout\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkPageBentoLayout\n      name=\"Sarah Mitchell\"\n      bio=\"Helping brands tell their story\"\n      avatar={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Sarah Mitchell\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Sarah Mitchell\",\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: \"Latest Video Series\",\n          description: \"5 Days of Brand Strategy\",\n          href: \"#\",\n          iconName: \"simple-icons/youtube\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n            alt: \"Latest Video Series\",\n          },\n        },\n        {\n          id: \"2\",\n          label: \"Download Free Guide\",\n          description: \"The Ultimate Brand Playbook\",\n          href: \"#\",\n          iconName: \"lucide/download\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\",\n            alt: \"Brand Playbook\",\n          },\n        },\n        {\n          id: \"3\",\n          label: \"Start Free Trial\",\n          description: \"Experience our platform with a 14-day free trial.\",\n          href: \"#\",\n          iconName: \"lucide/rocket\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\n            alt: \"Free Trial\",\n          },\n        },\n        {\n          id: \"4\",\n          label: \"Portfolio\",\n          href: \"#\",\n          iconName: \"lucide/briefcase\",\n        },\n        {\n          id: \"5\",\n          label: \"Shop Presets\",\n          href: \"#\",\n          iconName: \"lucide/shopping-bag\",\n        },\n        {\n          id: \"6\",\n          label: \"Book a Call\",\n          href: \"#\",\n          iconName: \"lucide/calendar\",\n        },\n        {\n          id: \"7\",\n          label: \"Newsletter\",\n          href: \"#\",\n          iconName: \"lucide/mail\",\n        },\n      ]}\n      footerAction={{\n        label: \"Made with OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/sparkles\" size={16} />,\n      }}\n      spacing=\"xl\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.05}\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 in the header. 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 in bento grid","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},"featured":{"type":"boolean","description":"","required":false},"image":{"type":"object","description":"","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},"imageUrl":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"BentoLink"},"typeLabel":"BentoLink[]","required":false,"mediaHints":{"path":"links[].image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Background image for featured bento card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"linksSlot":{"type":"object","description":"Custom slot for rendering all links (overrides links array)","typeLabel":"React.ReactNode","required":false},"featuredLinksSlot":{"type":"object","description":"Custom slot for rendering featured links (overrides featured links array)","typeLabel":"React.ReactNode","required":false},"regularLinksSlot":{"type":"object","description":"Custom slot for rendering regular links (overrides regular 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":"BentoSocialLink"},"typeLabel":"BentoSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","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 link icons","required":false},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"featuredLinksClassName":{"type":"string","description":"Additional CSS classes for the featured links grid","required":false},"featuredLinkClassName":{"type":"string","description":"Additional CSS classes for a featured link item","required":false},"featuredLinkOverlayClassName":{"type":"string","description":"Additional CSS classes for the featured link overlay","required":false},"featuredLinkImageClassName":{"type":"string","description":"Additional CSS classes for the featured link image","required":false},"featuredLinkIconClassName":{"type":"string","description":"Additional CSS classes for featured link icons","required":false},"featuredLinkLabelClassName":{"type":"string","description":"Additional CSS classes for featured link labels","required":false},"featuredLinkDescriptionClassName":{"type":"string","description":"Additional CSS classes for featured link descriptions","required":false},"regularLinksClassName":{"type":"string","description":"Additional CSS classes for the regular links grid","required":false},"regularLinkClassName":{"type":"string","description":"Additional CSS classes for a regular link item","required":false},"regularLinkIconWrapperClassName":{"type":"string","description":"Additional CSS classes for the regular link icon wrapper","required":false},"regularLinkIconClassName":{"type":"string","description":"Additional CSS classes for the regular link icon","required":false},"regularLinkLabelClassName":{"type":"string","description":"Additional CSS classes for the regular link label","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":12},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].description":{"type":"object","description":"","required":false,"maxLength":80},"links[].href":{"type":"object","description":"","required":true},"links[].featured":{"type":"object","description":"","required":false},"links[].image.src":{"type":"object","description":"","required":false},"links[].iconName":{"type":"object","description":"","required":false},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8}},"exampleProps":{"name":"Sarah Mitchell","bio":"Helping brands tell their story","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Sarah Mitchell"},"socialLinks":[{"id":"1","href":"https://instagram.com/sarahmitchell"},{"id":"2","href":"https://twitter.com/sarahmitchell"},{"id":"3","href":"https://linkedin.com/in/sarahmitchell"}],"links":[{"id":"1","label":"Latest Video Series","description":"5 Days of Brand Strategy","href":"https://youtube.com/watch?v=example","iconName":"simple-icons/youtube","featured":true,"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Latest Video Series"}},{"id":"2","label":"Download Free Guide","description":"The Ultimate Brand Playbook","href":"https://example.com/guide","iconName":"lucide/download","featured":true,"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Brand Playbook"}},{"id":"3","label":"Portfolio","href":"https://example.com/portfolio","iconName":"lucide/briefcase"},{"id":"4","label":"Book a Call","href":"https://example.com/call","iconName":"lucide/calendar"},{"id":"5","label":"Newsletter","href":"https://example.com/newsletter","iconName":"lucide/mail"},{"id":"6","label":"Shop","href":"https://example.com/shop","iconName":"lucide/shopping-bag"}],"footerAction":{"label":"Made with OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"gridFadeTop","patternOpacity":0.05},"dependencies":["@opensite/ui"],"tags":["link-page","bento","grid","modern","trendy","visual","featured","creator","entrepreneur","links"],"performance":{},"importantUsageNotes":"Bento-grid style link page that separates links into two tiers: featured (links with featured:true) and regular (all others). Featured links render as large aspect-4/3 cards with optional background images and an overlay gradient. Regular links render as compact icon-and-label rows in a 2-4 column grid. Provide 1–3 featured links and 2–6 regular links for best visual balance. Featured link images MUST use absolute CDN URLs.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"links[]":{"required":false,"minItems":2,"maxItems":12},"links[].label":{"required":true,"maxLength":50},"links[].description":{"required":false,"maxLength":80,"note":"Only visible on featured cards"},"links[].href":{"required":true},"links[].featured":{"required":false,"note":"true → large bento card with optional image; false → compact row"},"links[].image.src":{"required":false,"note":"Absolute URL; used as background image for featured cards only"},"links[].iconName":{"required":false,"note":"Iconify icon name; shown on featured cards and regular rows"},"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 in the header. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"links[featured].image.src":{"path":"links[].image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Background image for featured bento card. 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.","Featured cards without an image use the primary brand color as the background.","Regular links (featured:false or omitted) render as compact rows with an icon and label only.","Recommended: 1–3 featured links, 2–6 regular links."]}}},"timestamp":"2026-06-27T20:13:52.560Z"}