{"success":true,"data":{"block":{"id":"blog-grid-nine-posts","name":"Blog Grid Nine Posts","title":"Blog Grid Nine Posts","category":"Blog","categorySlug":"blog","description":"A comprehensive content grid layout displaying multiple items with author avatars, category badges, and publication dates. Features a 3-column grid on large screens with hover effects on images. Includes a mobile-only CTA button at the bottom. Ideal for content archive pages that need to display many items at once with full author attribution and content categorization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289053/685jc9awca7gzkfnf0pyt1ck2otg/blog-grid-nine-posts-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289054/f29qybwcou2r5epplxqz6h9vceep/blog-grid-nine-posts-mobile.jpg"},"componentPath":"blocks/blog/blog-grid-nine-posts.tsx","code":"import { BlogGridNinePosts } from \"@opensite/ui/blocks/blog/blog-grid-nine-posts\";\n\nexport default function Demo() {\n  return (\n    <BlogGridNinePosts\n      heading=\"Latest Insights\"\n      description=\"Stay informed with our collection of in-depth articles, tutorials, and industry analysis.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Kubernetes Best Practices for Production Workloads\",\n          summary:\n            \"Essential configurations, security measures, and optimization techniques for running Kubernetes in production.\",\n          image: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          category: \"Cloud Native\",\n          author: \"Kevin Zhang\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/t3k42fbzq7r7j93feldqm5cj1o1n\",\n          published: \"April 18, 2024\",\n          href: \"/blog/kubernetes-best-practices\",\n        },\n        {\n          id: \"2\",\n          title: \"Understanding WebAssembly and Its Use Cases\",\n          summary:\n            \"Explore how WebAssembly is enabling high-performance applications in browsers and beyond.\",\n          image: \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n          category: \"Web Tech\",\n          author: \"Nina Patel\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          published: \"April 16, 2024\",\n          href: \"/blog/webassembly-guide\",\n        },\n        {\n          id: \"3\",\n          title: \"Event-Driven Architecture Patterns\",\n          summary:\n            \"Learn how to design scalable systems using event-driven principles and messaging patterns.\",\n          image: \"https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z\",\n          category: \"Architecture\",\n          author: \"Carlos Mendez\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          published: \"April 14, 2024\",\n          href: \"/blog/event-driven-patterns\",\n        },\n        {\n          id: \"4\",\n          title: \"Accessibility in Modern Web Applications\",\n          summary:\n            \"Implementing WCAG guidelines and creating inclusive experiences for all users.\",\n          image: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          category: \"Accessibility\",\n          author: \"Jordan Lee\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\",\n          published: \"April 12, 2024\",\n          href: \"/blog/web-accessibility\",\n        },\n        {\n          id: \"5\",\n          title: \"Database Sharding Strategies for Scale\",\n          summary:\n            \"When and how to implement database sharding to handle massive data growth.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\",\n          category: \"Databases\",\n          author: \"Aisha Williams\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n          published: \"April 9, 2024\",\n          href: \"/blog/database-sharding\",\n        },\n        {\n          id: \"6\",\n          title: \"Testing Strategies for Microservices\",\n          summary:\n            \"Comprehensive approaches to testing distributed systems and ensuring service reliability.\",\n          image: \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n          category: \"Testing\",\n          author: \"Miguel Santos\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\",\n          published: \"April 7, 2024\",\n          href: \"/blog/testing-microservices\",\n        },\n        {\n          id: \"7\",\n          title: \"CSS Grid and Flexbox: A Complete Comparison\",\n          summary:\n            \"Master modern CSS layout techniques and know when to use Grid vs Flexbox.\",\n          image: \"https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz\",\n          category: \"CSS\",\n          author: \"Elena Kowalski\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n          published: \"April 4, 2024\",\n          href: \"/blog/css-grid-flexbox\",\n        },\n        {\n          id: \"8\",\n          title: \"Introduction to Domain-Driven Design\",\n          summary:\n            \"Understanding DDD principles and applying them to create maintainable software systems.\",\n          image: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\n          category: \"Software Design\",\n          author: \"Robert Kim\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n          published: \"April 1, 2024\",\n          href: \"/blog/domain-driven-design\",\n        },\n        {\n          id: \"9\",\n          title: \"Real-Time Collaboration: Building Apps Like Figma\",\n          summary:\n            \"Technical deep dive into building collaborative features using CRDTs and WebSockets.\",\n          image: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n          category: \"Real-Time\",\n          author: \"Sarah Thompson\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          published: \"March 29, 2024\",\n          href: \"/blog/realtime-collaboration\",\n        },\n      ]}\n      ctaAction={{\n        label: \"Load More\",\n        variant: \"outline\",\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},"posts":{"type":"array","description":"Array of content item configurations","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},"postsSlot":{"type":"object","description":"Custom slot for rendering content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"ctaAction":{"type":"object","description":"Action configuration for the CTA button (mobile)","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},"ctaSlot":{"type":"object","description":"Custom slot for rendering the CTA action (overrides ctaAction)","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},"postsClassName":{"type":"string","description":"Additional CSS classes for the content items grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual content cards","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA container","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":"Latest Insights","description":"Stay informed with our collection of in-depth articles, tutorials, and industry analysis.","posts":[{"id":"1","title":"Kubernetes Best Practices for Production Workloads","summary":"Essential configurations, security measures, and optimization techniques for running Kubernetes in production.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Cloud Native","author":"Kevin Zhang","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 18, 2024","href":"/blog/kubernetes-best-practices"},{"id":"2","title":"Understanding WebAssembly and Its Use Cases","summary":"Explore how WebAssembly is enabling high-performance applications in browsers and beyond.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Web Tech","author":"Nina Patel","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 16, 2024","href":"/blog/webassembly-guide"},{"id":"3","title":"Event-Driven Architecture Patterns","summary":"Learn how to design scalable systems using event-driven principles and messaging patterns.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Architecture","author":"Carlos Mendez","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 14, 2024","href":"/blog/event-driven-patterns"},{"id":"4","title":"Accessibility in Modern Web Applications","summary":"Implementing WCAG guidelines and creating inclusive experiences for all users.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Accessibility","author":"Jordan Lee","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 12, 2024","href":"/blog/web-accessibility"},{"id":"5","title":"Database Sharding Strategies for Scale","summary":"When and how to implement database sharding to handle massive data growth.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Databases","author":"Aisha Williams","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 9, 2024","href":"/blog/database-sharding"},{"id":"6","title":"Testing Strategies for Microservices","summary":"Comprehensive approaches to testing distributed systems and ensuring service reliability.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Testing","author":"Miguel Santos","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 7, 2024","href":"/blog/testing-microservices"}],"ctaAction":{"label":"Load More","variant":"outline"}},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","grid","archive","author","avatar","category","nine-posts"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. Designed for exactly 9 posts for a perfect 3×3 grid; fewer posts are fine but the layout may look unbalanced. Author avatars must be absolute image URLs.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library","team_members"]}}},"timestamp":"2026-06-27T20:12:23.234Z"}