{"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\";\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: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          author: \"Sarah Chen\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\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: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\",\n          author: \"Dr. Michael Torres\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\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: \"https://toastability-production.s3.amazonaws.com/9z0sbfnskx70vse99e3dfhper7i1\",\n          author: \"Emma Williams\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\",\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: \"https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo\",\n          author: \"James Rodriguez\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\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: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n          author: \"Lisa Anderson\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\",\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: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          author: \"David Kim\",\n          authorAvatar: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\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}},"exampleProps":{"badge":"Latest Articles","heading":"Insights from Our Experts","description":"Stay informed with the latest trends, best practices, and industry insights from our team of seasoned professionals.","posts":[{"id":"1","title":"Building Scalable Microservices with Kubernetes","summary":"Learn how to architect and deploy cloud-native microservices that scale effortlessly with modern container orchestration.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Sarah Chen","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","readTime":"12 min read","href":"/blog/kubernetes-microservices"},{"id":"2","title":"The Future of Artificial Intelligence in Healthcare","summary":"Exploring how AI and machine learning are revolutionizing patient care, diagnosis, and medical research.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Dr. Michael Torres","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","readTime":"8 min read","href":"/blog/ai-healthcare"},{"id":"3","title":"Design Systems: Creating Consistency at Scale","summary":"A comprehensive guide to building and maintaining design systems that empower teams and delight users.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","author":"Emma Williams","authorAvatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","readTime":"10 min read","href":"/blog/design-systems"}],"viewAllAction":{"label":"View All Articles","href":"/blog","variant":"outline"}},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","cards","read-time","author","avatar","badge","grid"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. The readTime field should reflect actual article length (e.g. '8 min read'). Author avatars must be absolute image URLs.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library","team_members"]}}},"timestamp":"2026-06-27T20:16:12.663Z"}