{"success":true,"data":{"block":{"id":"blog-masonry-featured","name":"Blog Masonry Featured","title":"Blog Masonry Featured","category":"Blog","categorySlug":"blog","description":"A masonry-style grid with a large featured item spanning two columns and rows, surrounded by smaller item cards. The featured item includes a full description while secondary items show only title and metadata. Features a centered heading and hover effects on media. Ideal for visually dynamic layouts that highlight a primary content piece.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293073/wbghpzq115at5dmxt5xu5lcy0b4s/cleanshot-2026-03-03-at-11-09-26.png","mobile":"https://cdn.ing/assets/i/r/293072/x0gex0m50ezt2iup87wch0vg6viu/cleanshot-2026-03-03-at-11-09-46.png"},"componentPath":"blocks/blog/blog-masonry-featured.tsx","code":"import { BlogMasonryFeatured } from \"@opensite/ui/blocks/blog/blog-masonry-featured\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogMasonryFeatured\n      heading=\"Curated Reads\"\n      description=\"Handpicked articles and insights from our team and community to keep you informed and inspired.\"\n      background=\"secondary\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n      posts={[\n        {\n          id: \"featured\",\n          title: \"The Art and Science of API Design\",\n          description:\n            \"A comprehensive exploration of API design principles, RESTful best practices, GraphQL considerations, and how to create developer-friendly interfaces that stand the test of time.\",\n          image: imagePlaceholders[40],\n          author: \"Victoria Chang\",\n          date: \"April 22, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"1\",\n          title: \"Serverless Cost Optimization\",\n          description:\n            \"Strategies to reduce serverless computing costs while maintaining performance.\",\n          image: imagePlaceholders[77],\n          author: \"Ahmed Hassan\",\n          date: \"April 19, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Building Accessible Forms\",\n          description:\n            \"Creating inclusive form experiences that work for everyone.\",\n          image: imagePlaceholders[11],\n          author: \"Laura Anderson\",\n          date: \"April 16, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"State Management in React\",\n          description:\n            \"Comparing Redux, Zustand, Jotai, and Context API for different use cases.\",\n          image: imagePlaceholders[55],\n          author: \"Chris Taylor\",\n          date: \"April 13, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"WebSocket Security Guide\",\n          description:\n            \"Best practices for securing real-time WebSocket connections.\",\n          image: imagePlaceholders[90],\n          author: \"Yuki Tanaka\",\n          date: \"April 10, 2024\",\n          href: \"#\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of content items (first item is featured)","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"featuredSlot":{"type":"object","description":"Custom slot for rendering the featured item (overrides first item)","typeLabel":"React.ReactNode","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering additional items (overrides items 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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the items grid","required":false},"featuredClassName":{"type":"string","description":"Additional CSS classes for the featured item wrapper","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured item media","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual item cards","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","masonry","featured","grid","dynamic","visual","highlight"],"performance":{},"importantUsageNotes":"This block has a fixed masonry layout: exactly 1 featured post (id 'featured') plus 4 secondary posts, totalling 5 'posts'. Only use real blog posts from the site's content; do not invent titles, descriptions, authors, or dates. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:49.229Z"}