{"success":true,"data":{"block":{"id":"blog-featured-popular","name":"Blog Featured Popular","title":"Blog Featured Popular","category":"Blog","categorySlug":"blog","description":"A two-tier content layout with a large featured item at the top and an additional content grid below. The featured item displays side-by-side image and content on desktop. Additional items show in a 3-column grid with images, category badges, titles, and descriptions. Renders only provided content without any defaults. Perfect for highlighting primary content alongside secondary content collections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289043/j82rplpq97adxj2rz70mi15nz5pu/blog-featured-popular-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289044/mtjoojrd0sa8qlp0tk8rei5hn1kv/blog-featured-popular-mobile.jpg"},"componentPath":"blocks/blog/blog-featured-popular.tsx","code":"import { BlogFeaturedPopular } from \"@opensite/ui/blocks/blog/blog-featured-popular\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogFeaturedPopular\n      heading=\"Top Reads This Month\"\n      description=\"Discover the most engaging and insightful articles from our community of experts and thought leaders.\"\n      popularHeading=\"Popular Articles\"\n      posts={[\n        {\n          id: \"featured\",\n          title: \"The Complete Guide to Microservices Architecture\",\n          description:\n            \"An comprehensive exploration of microservices patterns, best practices, and real-world implementation strategies for building scalable distributed systems.\",\n          image: imagePlaceholders[42],\n          category: \"Architecture\",\n          href: \"/blog/microservices-guide\",\n        },\n        {\n          id: \"1\",\n          title: \"GraphQL vs REST: Making the Right Choice\",\n          description:\n            \"A detailed comparison of GraphQL and REST APIs, helping you choose the best approach for your project.\",\n          image: imagePlaceholders[83],\n          category: \"API Design\",\n          href: \"/blog/graphql-vs-rest\",\n        },\n        {\n          id: \"2\",\n          title: \"Advanced TypeScript Patterns and Techniques\",\n          description:\n            \"Master advanced TypeScript features to write more maintainable and type-safe code.\",\n          image: imagePlaceholders[19],\n          category: \"Programming\",\n          href: \"/blog/advanced-typescript\",\n        },\n        {\n          id: \"3\",\n          title: \"Serverless Computing: When and Why\",\n          description:\n            \"Understanding serverless architectures and identifying the right use cases for your applications.\",\n          image: imagePlaceholders[64],\n          category: \"Cloud\",\n          href: \"/blog/serverless-computing\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"popularHeading":{"type":"object","description":"Popular posts section title","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of blog post configurations (first post 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 post (overrides first post)","typeLabel":"React.ReactNode","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering popular posts (overrides posts 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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"featuredClassName":{"type":"string","description":"Additional CSS classes for the featured post wrapper","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured post image","required":false},"featuredContentClassName":{"type":"string","description":"Additional CSS classes for the featured post content","required":false},"popularHeadingClassName":{"type":"string","description":"Additional CSS classes for the popular posts heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the popular posts grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post 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","featured","popular","trending","editorial","grid","two-tier","content","layout","collection"],"performance":{},"importantUsageNotes":"This block has a fixed featured + popular layout: the first post in the 'posts' array is the large featured card, and the remaining posts populate the popular sidebar. Lock to exactly 4 total posts (1 featured + 3 popular) matching the demo. Only use real blog posts from the site's content; do not invent titles, descriptions, categories, or hrefs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:04.722Z"}