{"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\";\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:\n            \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\n          category: \"Architecture\",\n          href: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u\",\n          category: \"API Design\",\n          href: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82\",\n          category: \"Programming\",\n          href: \"#\",\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:\n            \"https://toastability-production.s3.amazonaws.com/5sm6wc4no8fyzxfki5njmnv6gql5\",\n          category: \"Cloud\",\n          href: \"#\",\n        },\n      ]}\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      background=\"dark\"\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}},"exampleProps":{"heading":"Top Reads This Month","description":"Discover the most engaging and insightful articles from our community of experts and thought leaders.","popularHeading":"Popular Articles","posts":[{"id":"featured","title":"The Complete Guide to Microservices Architecture","description":"A comprehensive exploration of microservices patterns, best practices, and real-world implementation strategies for building scalable distributed systems.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Architecture","href":"/blog/microservices-guide"},{"id":"1","title":"GraphQL vs REST: Making the Right Choice","description":"A detailed comparison of GraphQL and REST APIs, helping you choose the best approach for your project.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"API Design","href":"/blog/graphql-vs-rest"},{"id":"2","title":"Advanced TypeScript Patterns and Techniques","description":"Master advanced TypeScript features to write more maintainable and type-safe code.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Programming","href":"/blog/advanced-typescript"},{"id":"3","title":"Serverless Computing: When and Why","description":"Understanding serverless architectures and identifying the right use cases for your applications.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Cloud","href":"/blog/serverless-computing"}]},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","featured","popular","trending","editorial","grid","two-tier","content","layout","collection"],"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 the featured post and should be the most compelling or recent article. Minimum 2 posts (1 featured} ${at least 1 popular). Images must be absolute URLs.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library"]}}},"timestamp":"2026-06-27T20:17:26.220Z"}