{"success":true,"data":{"block":{"id":"blog-category-overlay","name":"Blog Category Overlay","title":"Blog Category Overlay","category":"Blog","categorySlug":"blog","description":"A content grid with category badges overlaid on images using a glassmorphism effect. Features a centered header section with badge, heading, description, and optional action link. Each card shows the item image, category overlay, title, date with icon, and optional action link. Great for visually categorized content with modern styling.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289041/sit5hcfahlcas6x4gteh9s4ku8si/blog-category-overlay-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289042/v33nsz7ia6qtmuczwt4ekg3yp1p4/blog-category-overlay-mobile.jpg"},"componentPath":"blocks/blog/blog-category-overlay.tsx","code":"import { BlogCategoryOverlay } from \"@opensite/ui/blocks/blog/blog-category-overlay\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCategoryOverlay\n      badge=\"Explore Topics\"\n      heading=\"Curated Content for Every Interest\"\n      description=\"Browse through our carefully organized collection of articles, tutorials, and insights across various technology domains.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Machine Learning Model Optimization Techniques\",\n          image: imagePlaceholders[38],\n          category: \"AI & ML\",\n          date: \"April 12, 2024\",\n          href: \"/blog/ml-optimization\",\n        },\n        {\n          id: \"2\",\n          title: \"Progressive Web Apps: The Complete Guide\",\n          image: imagePlaceholders[76],\n          category: \"Web Development\",\n          date: \"April 8, 2024\",\n          href: \"/blog/pwa-complete-guide\",\n        },\n        {\n          id: \"3\",\n          title: \"Cybersecurity Best Practices for Remote Teams\",\n          image: imagePlaceholders[14],\n          category: \"Security\",\n          date: \"April 5, 2024\",\n          href: \"/blog/remote-cybersecurity\",\n        },\n        {\n          id: \"4\",\n          title: \"Data Visualization with D3.js and React\",\n          image: imagePlaceholders[52],\n          category: \"Data Science\",\n          date: \"March 29, 2024\",\n          href: \"/blog/data-viz-d3-react\",\n        },\n        {\n          id: \"5\",\n          title: \"Building Accessible Web Applications\",\n          image: imagePlaceholders[98],\n          category: \"Accessibility\",\n          date: \"March 25, 2024\",\n          href: \"/blog/accessible-web-apps\",\n        },\n        {\n          id: \"6\",\n          title: \"DevOps Culture: Bridging Development and Operations\",\n          image: imagePlaceholders[31],\n          category: \"DevOps\",\n          date: \"March 20, 2024\",\n          href: \"/blog/devops-culture\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"Browse All Categories\",\n        href: \"/categories\",\n        asButton: true,\n      }}\n      readMoreText=\"Read 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},"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},"viewAllAction":{"type":"object","description":"Action configuration for the primary action link","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 primary action (overrides viewAllAction)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Action link text for individual items","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},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the view all action","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual content cards","required":false},"categoryBadgeClassName":{"type":"string","description":"Additional CSS classes for the category badge overlay","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","cards","category","overlay","glassmorphism","grid","modern"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column × 2-row overlay-image grid. Only use real blog posts from the site's content; do not invent titles, categories, or dates. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:44:42.198Z"}