{"success":true,"data":{"block":{"id":"blog-horizontal-cards","name":"Blog Horizontal Cards","title":"Blog Horizontal Cards","category":"Blog","categorySlug":"blog","description":"A content layout with horizontal card orientation featuring side-by-side image and content. Each card displays a thumbnail, category badge, author, date, title, summary, and 'Read more' link. Includes a centered header with optional badge, heading, and description, plus a bottom CTA button. Ideal for content-rich layouts that need more space for item summaries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289047/4anidn99fztkdrgbdr00bhdvodhe/blog-horizontal-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289048/h3f88g2g1hddrul4usnh38nkqmbo/blog-horizontal-cards-mobile.jpg"},"componentPath":"blocks/blog/blog-horizontal-cards.tsx","code":"import { BlogHorizontalCards } from \"@opensite/ui/blocks/blog/blog-horizontal-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogHorizontalCards\n      badge=\"Featured Content\"\n      heading=\"Deep Dives and Tutorials\"\n      description=\"Comprehensive guides and detailed analyses to help you master complex topics and advance your skills.\"\n      ctaAction={{\n        label: \"Explore All Tutorials\",\n        href: \"/tutorials\",\n        variant: \"default\",\n      }}\n      posts={[\n        {\n          id: \"1\",\n          title: \"Building a Design System from Scratch\",\n          summary:\n            \"A step-by-step guide to creating a scalable design system that grows with your product and team. Learn about component libraries, design tokens, documentation, and governance.\",\n          image: imagePlaceholders[36],\n          category: \"Design Systems\",\n          author: \"Maya Chen\",\n          date: \"April 20, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Advanced React Patterns: Compound Components\",\n          summary:\n            \"Master the compound component pattern to create flexible and reusable React components with implicit state sharing and elegant APIs.\",\n          image: imagePlaceholders[82],\n          category: \"React\",\n          author: \"Jake Morrison\",\n          date: \"April 17, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"PostgreSQL Performance Tuning Guide\",\n          summary:\n            \"Deep dive into PostgreSQL optimization techniques including indexing strategies, query optimization, connection pooling, and configuration tuning for production workloads.\",\n          image: imagePlaceholders[25],\n          category: \"Databases\",\n          author: \"Dmitri Volkov\",\n          date: \"April 14, 2024\",\n          href: \"#\",\n        },\n      ]}\n      readMoreText=\"Read Full Article\"\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},"ctaAction":{"type":"object","description":"Action configuration for the main CTA 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},"ctaSlot":{"type":"object","description":"Custom slot for rendering the CTA action (overrides ctaAction)","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 posts (overrides posts array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for \"Read more\" links on each post","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},"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 container","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post 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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","horizontal","cards","side-by-side","content-rich","summary"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'posts' since the layout is a vertical stack of 3 horizontal cards. Only use real blog posts from the site's content; do not invent titles, summaries, categories, authors, or dates. Use a variant of 'default' for the 'ctaAction'. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:44:16.963Z"}