{"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\";\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: \"#\",\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. And discover best practices for maintaining consistency and fostering collaboration across teams. Lastly, see real-world examples of successful design systems in action.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\n          category: \"Design Systems\",\n          author: \"Maya Chen\",\n          date: \"Apr 20, '24\",\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:\n            \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n          category: \"React\",\n          author: \"Jake Morrison\",\n          date: \"Apr 17, '24\",\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:\n            \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          category: \"Databases\",\n          author: \"Dmitri Volkov\",\n          date: \"Apr 14, '24\",\n          href: \"#\",\n        },\n      ]}\n      readMoreText=\"Read Full Article\"\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopRight\"\n      patternOpacity={0.25}\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}},"exampleProps":{"badge":"Featured Content","heading":"Deep Dives and Tutorials","description":"Comprehensive guides and detailed analyses to help you master complex topics and advance your skills.","ctaAction":{"label":"Explore All Tutorials","href":"/tutorials","variant":"default"},"posts":[{"id":"1","title":"Building a Design System from Scratch","summary":"A step-by-step guide to creating a scalable design system that grows with your product and team.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Design Systems","author":"Maya Chen","date":"April 20, 2024","href":"/blog/building-design-system"},{"id":"2","title":"Advanced React Patterns: Compound Components","summary":"Master the compound component pattern to create flexible and reusable React components with implicit state sharing.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"React","author":"Jake Morrison","date":"April 17, 2024","href":"/blog/react-compound-components"},{"id":"3","title":"PostgreSQL Performance Tuning Guide","summary":"Deep dive into PostgreSQL optimization techniques including indexing strategies, query optimization, and connection pooling.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","category":"Databases","author":"Dmitri Volkov","date":"April 14, 2024","href":"/blog/postgresql-tuning"}],"readMoreText":"Read Full Article"},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","horizontal","cards","side-by-side","content-rich","summary"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. The layout is designed for 3–6 posts. Thumbnail images render at 260px wide — use landscape images (16:9 aspect ratio works best). The readMoreText prop is shared across all cards.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library"]}}},"timestamp":"2026-06-27T20:13:55.897Z"}