{"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/308423/vzh3at0th7r3fjb34w3meh7m2hus/blog-masonry-featured-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308424/opdat9o8wvh2kxsbrpxlhufy2jai/blog-masonry-featured-mobile.jpg"},"componentPath":"blocks/blog/blog-masonry-featured.tsx","code":"import { BlogMasonryFeatured } from \"@opensite/ui/blocks/blog/blog-masonry-featured\";\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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\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: \"https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo\",\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: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\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: \"https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg\",\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: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\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}},"exampleProps":{"heading":"Curated Reads","description":"Handpicked articles and insights from our team and community to keep you informed and inspired.","background":"secondary","posts":[{"id":"featured","title":"The Art and Science of API Design","description":"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.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Victoria Chang","date":"April 22, 2024","href":"/blog/api-design"},{"id":"1","title":"Serverless Cost Optimization","description":"Strategies to reduce serverless computing costs while maintaining performance.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Ahmed Hassan","date":"April 19, 2024","href":"/blog/serverless-cost"},{"id":"2","title":"Building Accessible Forms","description":"Creating inclusive form experiences that work for everyone.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Laura Anderson","date":"April 16, 2024","href":"/blog/accessible-forms"},{"id":"3","title":"State Management in React","description":"Comparing Redux, Zustand, Jotai, and Context API for different use cases.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Chris Taylor","date":"April 13, 2024","href":"/blog/react-state-management"}]},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","masonry","featured","grid","dynamic","visual","highlight"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. The first post in the array is always the featured (large) item. Recommended 4–5 total posts for the best visual balance. Images must be absolute URLs.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library"]}}},"timestamp":"2026-06-27T20:17:18.765Z"}