{"success":true,"data":{"block":{"id":"blog-cards-read-time","name":"Blog Cards Read Time","title":"Blog Cards Read Time","category":"Blog","categorySlug":"blog","description":"A blog card grid featuring author avatars, read time badges, and separator lines. Each card displays an image, title, summary, author info, and estimated reading time. Includes a centered header with icon badge and 'View All Blogs' CTA button. Ideal for content-heavy blogs that want to show reading commitment upfront.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289039/fxiksjovvtc1ax99dz0pvtqbinkm/blog-cards-read-time-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289040/wzjl8rhzpbrqp4h2glbwb6j79e7k/blog-cards-read-time-mobile.jpg"},"componentPath":"blocks/blog/blog-cards-read-time.tsx","code":"import { BlogCardsReadTime } from \"@opensite/ui/blocks/blog/blog-cards-read-time\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCardsReadTime\n      badge=\"Latest Articles\"\n      heading=\"Insights from Our Experts\"\n      description=\"Stay informed with the latest trends, best practices, and industry insights from our team of seasoned professionals.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Building Scalable Microservices with Kubernetes\",\n          summary:\n            \"Learn how to architect and deploy cloud-native microservices that scale effortlessly with modern container orchestration.\",\n          image: imagePlaceholders[34],\n          author: \"Sarah Chen\",\n          authorAvatar: imagePlaceholders[67],\n          readTime: \"12 min read\",\n          href: \"/blog/kubernetes-microservices\",\n        },\n        {\n          id: \"2\",\n          title: \"The Future of Artificial Intelligence in Healthcare\",\n          summary:\n            \"Exploring how AI and machine learning are revolutionizing patient care, diagnosis, and medical research.\",\n          image: imagePlaceholders[89],\n          author: \"Dr. Michael Torres\",\n          authorAvatar: imagePlaceholders[61],\n          readTime: \"8 min read\",\n          href: \"/blog/ai-healthcare\",\n        },\n        {\n          id: \"3\",\n          title: \"Design Systems: Creating Consistency at Scale\",\n          summary:\n            \"A comprehensive guide to building and maintaining design systems that empower teams and delight users.\",\n          image: imagePlaceholders[56],\n          author: \"Emma Williams\",\n          authorAvatar: imagePlaceholders[24],\n          readTime: \"10 min read\",\n          href: \"/blog/design-systems\",\n        },\n        {\n          id: \"4\",\n          title: \"Zero-Trust Security Architecture Explained\",\n          summary:\n            \"Understanding the principles and implementation strategies for modern zero-trust security frameworks.\",\n          image: imagePlaceholders[78],\n          author: \"James Rodriguez\",\n          authorAvatar: imagePlaceholders[5],\n          readTime: \"15 min read\",\n          href: \"/blog/zero-trust-security\",\n        },\n        {\n          id: \"5\",\n          title: \"Optimizing React Performance for Large Applications\",\n          summary:\n            \"Practical techniques and tools for keeping your React applications fast and responsive as they grow.\",\n          image: imagePlaceholders[12],\n          author: \"Lisa Anderson\",\n          authorAvatar: imagePlaceholders[38],\n          readTime: \"11 min read\",\n          href: \"/blog/react-performance\",\n        },\n        {\n          id: \"6\",\n          title: \"The Rise of Edge Computing and IoT\",\n          summary:\n            \"How edge computing is transforming IoT deployments and enabling real-time data processing at scale.\",\n          image: imagePlaceholders[45],\n          author: \"David Kim\",\n          authorAvatar: imagePlaceholders[72],\n          readTime: \"9 min read\",\n          href: \"/blog/edge-computing-iot\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"View All Articles\",\n        href: \"/blog\",\n        variant: \"outline\",\n      }}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/tagline content above heading","typeLabel":"React.ReactNode","required":false},"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 blog post 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 posts (overrides posts array)","typeLabel":"React.ReactNode","required":false},"viewAllAction":{"type":"object","description":"Action configuration for the \"View All\" button","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 view all 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 content wrapper","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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 posts grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post cards","required":false},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the view all 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","cards","read-time","author","avatar","badge","grid"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column grid with 2 rows (3×2). Only use real blog posts from the site's content; do not invent blog post titles, authors, dates, or excerpts. Only use real author names and real author avatar images from the media library for the 'author' and 'authorAvatar' fields on each post. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:28.319Z"}