{"success":true,"data":{"block":{"id":"blog-grid-author-cards","name":"Blog Grid Author Cards","title":"Blog Grid Author Cards","category":"Blog","categorySlug":"blog","description":"A responsive grid layout displaying content items with author attribution, category badges, and metadata. Features a 3-column grid on large screens with hover effects on images. Ideal for content listing pages that emphasize author information and categorization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293166/xmo0ptefru2aed49rjxq0rpy9wd9/cleanshot-2026-03-04-at-13-28-50.png","mobile":"https://cdn.ing/assets/i/r/293165/g1fwojesz1y46m9uqsvb1z7flm6g/cleanshot-2026-03-04-at-13-29-22.png"},"componentPath":"blocks/blog/blog-grid-author-cards.tsx","code":"import { BlogGridAuthorCards } from \"@opensite/ui/blocks/blog/blog-grid-author-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogGridAuthorCards\n      heading=\"Stories from Our Team\"\n      description=\"Expert insights, practical guides, and thought leadership from our talented contributors.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Scaling Engineering Teams: Lessons from 10 Years\",\n          summary:\n            \"Key insights on building and scaling high-performing engineering organizations from startup to enterprise.\",\n          image: imagePlaceholders[31],\n          category: \"Leadership\",\n          author: \"Marcus Johnson\",\n          authorAvatar: imagePlaceholders[68],\n          published: \"April 15, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"The Psychology of User Interface Design\",\n          summary:\n            \"How cognitive principles and behavioral psychology inform better UI/UX decisions and user experiences.\",\n          image: imagePlaceholders[79],\n          category: \"Design\",\n          author: \"Rachel Park\",\n          authorAvatar: imagePlaceholders[101],\n          published: \"April 13, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"From Monolith to Microservices: A Migration Story\",\n          summary:\n            \"Our journey breaking down a legacy monolithic application into a modern microservices architecture.\",\n          image: imagePlaceholders[73],\n          category: \"Architecture\",\n          author: \"Alex Rivera\",\n          authorAvatar: imagePlaceholders[35],\n          published: \"April 10, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"Machine Learning in Production: Real-World Challenges\",\n          summary:\n            \"Practical lessons learned deploying ML models at scale in production environments.\",\n          image: imagePlaceholders[49],\n          category: \"AI/ML\",\n          author: \"Dr. Priya Sharma\",\n          authorAvatar: imagePlaceholders[84],\n          published: \"April 8, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"5\",\n          title: \"Building Resilient Distributed Systems\",\n          summary:\n            \"Design patterns and strategies for creating fault-tolerant systems that gracefully handle failures.\",\n          image: imagePlaceholders[92],\n          category: \"Systems\",\n          author: \"Thomas Wei\",\n          authorAvatar: imagePlaceholders[18],\n          published: \"April 5, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"6\",\n          title: \"The Future of Web Development: 2024 and Beyond\",\n          summary:\n            \"Emerging trends, technologies, and paradigms shaping the next generation of web applications.\",\n          image: imagePlaceholders[40],\n          category: \"Web Dev\",\n          author: \"Sophie Martinez\",\n          authorAvatar: imagePlaceholders[73],\n          published: \"April 2, 2024\",\n          href: \"#\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"View All Posts\",\n        href: \"#\",\n        variant: \"outline\",\n      }}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.9}\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 items to display","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 items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"viewAllAction":{"type":"object","description":"Action configuration for the action 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},"viewAllSlot":{"type":"object","description":"Custom slot for rendering the action (overrides viewAllAction)","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 items grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual cards","required":false},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the action 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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","grid","author","avatar","category","badge","cards","listing"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column × 2-row author-card grid. Only use real blog posts from the site's content; do not invent titles, summaries, categories, or dates. Only use real author names and real author avatar images from the media library for the 'author' and 'authorAvatar' fields. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:52.927Z"}