{"success":true,"data":{"block":{"id":"blog-related-articles","name":"Blog Related Articles","title":"Blog Related Articles","category":"Blog","categorySlug":"blog","description":"A compact related articles section with a 4-column grid layout. Each article displays category, title, description, and date in a text-only format without images. Features a header with title and 'See all' button. Ideal for sidebar widgets or end-of-article related content suggestions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289045/302tw35wkqc33u0n0mtxxo0kqie6/blog-related-articles-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289046/j4qywhvjzr01shl917ff2vrt3up6/blog-related-articles-mobile.jpg"},"componentPath":"blocks/blog/blog-related-articles.tsx","code":"import { BlogRelatedArticles } from \"@opensite/ui/blocks/blog/blog-related-articles\";\n\nexport default function Demo() {\n  return (\n    <BlogRelatedArticles\n      heading=\"Related Articles\"\n      seeAllAction={{\n        label: \"See All\",\n        href: \"/blog\",\n        variant: \"ghost\",\n      }}\n      articles={[\n        {\n          id: \"1\",\n          title: \"Authentication Best Practices for Modern Apps\",\n          description:\n            \"Implementing secure authentication with OAuth 2.0, JWT tokens, and multi-factor authentication strategies.\",\n          category: \"Security\",\n          date: \"April 18, 2024\",\n          href: \"/blog/authentication-best-practices\",\n        },\n        {\n          id: \"2\",\n          title: \"Optimizing Database Queries for Performance\",\n          description:\n            \"Techniques for writing efficient SQL, understanding query plans, and leveraging indexes effectively.\",\n          category: \"Databases\",\n          date: \"April 15, 2024\",\n          href: \"/blog/database-query-optimization\",\n        },\n        {\n          id: \"3\",\n          title: \"Introduction to Service Mesh with Istio\",\n          description:\n            \"Understanding service mesh architecture and implementing Istio for microservices communication.\",\n          category: \"Infrastructure\",\n          date: \"April 12, 2024\",\n          href: \"/blog/istio-service-mesh\",\n        },\n        {\n          id: \"4\",\n          title: \"Building Responsive Images with Srcset\",\n          description:\n            \"Delivering optimized images for different screen sizes and pixel densities using modern HTML features.\",\n          category: \"Web Development\",\n          date: \"April 9, 2024\",\n          href: \"/blog/responsive-images-srcset\",\n        },\n      ]}\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"seeAllAction":{"type":"object","description":"Action configuration for the \"See 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},"seeAllSlot":{"type":"object","description":"Custom slot for rendering the see all action (overrides seeAllAction)","typeLabel":"React.ReactNode","required":false},"articles":{"type":"array","description":"Array of article/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},"articlesSlot":{"type":"object","description":"Custom slot for rendering articles (overrides articles array)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"seeAllClassName":{"type":"string","description":"Additional CSS classes for the see all action","required":false},"articlesClassName":{"type":"string","description":"Additional CSS classes for the articles grid","required":false},"articleCardClassName":{"type":"string","description":"Additional CSS classes for individual article 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}},"exampleProps":{"heading":"Related Articles","seeAllAction":{"label":"See All","href":"/blog","variant":"ghost"},"articles":[{"id":"1","title":"Authentication Best Practices for Modern Apps","description":"Implementing secure authentication with OAuth 2.0, JWT tokens, and multi-factor authentication strategies.","category":"Security","date":"April 18, 2024","href":"/blog/authentication-best-practices"},{"id":"2","title":"Optimizing Database Queries for Performance","description":"Techniques for writing efficient SQL, understanding query plans, and leveraging indexes effectively.","category":"Databases","date":"April 15, 2024","href":"/blog/database-query-optimization"},{"id":"3","title":"Introduction to Service Mesh with Istio","description":"Understanding service mesh architecture and implementing Istio for microservices communication.","category":"Infrastructure","date":"April 12, 2024","href":"/blog/istio-service-mesh"},{"id":"4","title":"Building Responsive Images with Srcset","description":"Delivering optimized images for different screen sizes and pixel densities using modern HTML features.","category":"Web Development","date":"April 9, 2024","href":"/blog/responsive-images-srcset"}]},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","related","sidebar","widget","text-only","grid","compact"],"performance":{},"importantUsageNotes":"Blog posts must come from real, source-backed content. Do not fabricate article titles, authors, or excerpts. This block is intentionally image-free; do not add image props. Articles should be genuinely related to the page's topic. Minimum 2, maximum 4 articles recommended for the 4-column layout.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["blog_posts","media_library"]}}},"timestamp":"2026-06-27T20:14:33.206Z"}