{"success":true,"data":{"block":{"id":"blog-horizontal-timeline","name":"Blog Horizontal Timeline","title":"Blog Horizontal Timeline","category":"Blog","categorySlug":"blog","description":"A timeline-style layout with large images alongside content cards in a horizontal arrangement. Each item features a rounded image, title, uppercase date, description, and animated action button with arrow icon. Items are separated by borders creating a timeline effect. Perfect for chronological content presentation or editorial storytelling.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295069/2u1a01s51c2780hza7q7ood0830b/blog-horizontal-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/295070/9qmrhlz26uzfxq1cn4uqsal1mco8/blog-horizontal-timeline-mobile.png"},"componentPath":"blocks/blog/blog-horizontal-timeline.tsx","code":"import { BlogHorizontalTimeline } from \"@opensite/ui/blocks/blog/blog-horizontal-timeline\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogHorizontalTimeline\n      heading=\"Product Evolution\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Platform Launch: V1.0\",\n          description:\n            \"We officially launched our platform with core features including user authentication, dashboard analytics, and API integrations. The initial release focused on delivering a solid foundation for future growth.\",\n          image: imagePlaceholders[47],\n          date: \"JANUARY 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"AI Integration: Smart Insights\",\n          description:\n            \"Introduced machine learning-powered insights and recommendations. Our AI engine now analyzes user behavior patterns and provides personalized suggestions to improve productivity and outcomes.\",\n          image: imagePlaceholders[93],\n          date: \"FEBRUARY 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"Team Collaboration: Real-Time\",\n          description:\n            \"Released real-time collaboration features enabling teams to work together seamlessly. Includes shared workspaces, live cursors, comments, and instant notifications across all connected devices.\",\n          image: imagePlaceholders[16],\n          date: \"MARCH 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"Enterprise Edition: Security & Scale\",\n          description:\n            \"Launched Enterprise tier with advanced security features, SSO integration, audit logs, custom SLAs, and dedicated support. Now serving organizations with thousands of users across multiple regions.\",\n          image: imagePlaceholders[61],\n          date: \"APRIL 2024\",\n          href: \"#\",\n        },\n      ]}\n      readText=\"Read More\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","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 content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"readText":{"type":"object","description":"Text for action links on each content item","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the content items container","required":false},"postItemClassName":{"type":"string","description":"Additional CSS classes for individual content items","required":false},"postImageClassName":{"type":"string","description":"Additional CSS classes for content item images","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for content item cards","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","timeline","horizontal","chronological","editorial","storytelling"],"performance":{},"importantUsageNotes":"Provide exactly 4 items in the 'posts' array since the layout is a horizontal 4-step timeline. Only use real blog posts or content milestones from the site; do not invent titles, descriptions, dates, or hrefs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:44:16.879Z"}