{"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/308422/0ev4z1pdndf6xxipmg778jdhog9n/blog-grid-author-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308421/qffozxyvkg6yvawumu8b686hv9mm/blog-grid-author-cards-mobile.jpg"},"componentPath":"blocks/blog/blog-grid-author-cards.tsx","code":"import { BlogGridAuthorCards } from \"@opensite/ui/blocks/blog/blog-grid-author-cards\";\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: \"https://toastability-production.s3.amazonaws.com/s4vho0wfbjhf758oife8qfuekou8\",\n          category: \"Leadership\",\n          author: \"Marcus Johnson\",\n          authorAvatar: \"https://cdn.ing/assets/i/r/289100/qx79hnpbzbm229nfaeceafv6b3a8/cooking-citrus-and-pistachio-bundt-cake-on-rusty-t-2024-10-18-04-31-33-utc.webp\",\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: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\n          category: \"Design\",\n          author: \"Rachel Park\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/krnuu3wc960ltazr5cu120xpzmj5\",\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: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\n          category: \"Architecture\",\n          author: \"Alex Rivera\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\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: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\n          category: \"AI/ML\",\n          author: \"Dr. Priya Sharma\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u\",\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: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\",\n          category: \"Systems\",\n          author: \"Thomas Wei\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\n          category: \"Web Dev\",\n          author: \"Sophie Martinez\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\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}},"exampleProps":{"heading":"Stories from Our Team","description":"Expert insights, practical guides, and thought leadership from our talented contributors.","posts":[{"id":"1","title":"Scaling Engineering Teams: Lessons from 10 Years","summary":"Key insights on building and scaling high-performing engineering organizations from startup to enterprise.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Leadership","author":"Marcus Johnson","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 15, 2024","href":"/blog/scaling-engineering-teams"},{"id":"2","title":"The Psychology of User Interface Design","summary":"How cognitive principles and behavioral psychology inform better UI/UX decisions and user experiences.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Design","author":"Rachel Park","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 13, 2024","href":"/blog/psychology-ui-design"},{"id":"3","title":"From Monolith to Microservices: A Migration Story","summary":"Our journey breaking down a legacy monolithic application into a modern microservices architecture.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Architecture","author":"Alex Rivera","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","published":"April 10, 2024","href":"/blog/monolith-to-microservices"}],"viewAllAction":{"label":"View All Posts","href":"/blog","variant":"outline"},"background":"gray"},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","grid","author","avatar","category","badge","cards","listing"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. Each post item requires a real absolute image URL for both the post thumbnail and the author avatar.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library","team_members"]}}},"timestamp":"2026-06-27T20:16:32.487Z"}