{"success":true,"data":{"category":{"slug":"article","name":"Article","description":"Collection of article components"},"blocks":[{"id":"article-hero-prose","name":"Article Hero Prose","title":"Article Hero Prose","category":"Article","categorySlug":"article","description":"A full-width content layout featuring a prominent hero media, author information with avatar, and rich prose content including alerts, tables, blockquotes, and lists. Ideal for long-form content that needs visual hierarchy with a strong opening media and detailed content sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293094/4ksu0y47tgsk03h18uq3dknyy3e3/cleanshot-2026-03-03-at-13-41-31.png","mobile":"https://cdn.ing/assets/i/r/293093/t099stgoambmukt6v1wq0xxvwjwj/cleanshot-2026-03-03-at-13-41-52.png"},"componentPath":"blocks/article/article-hero-prose.tsx","code":"import { ArticleHeroProse } from \"@opensite/ui/blocks/article/article-hero-prose\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleHeroProse\n      background=\"dark\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.15}\n      post={{\n        title: \"The Evolution of Modern JavaScript: From ES6 to ES2026\",\n        description:\n          \"Explore how JavaScript has transformed over the past decade, introducing powerful features that have reshaped web development as we know it.\",\n        authorName: \"Alex Rodriguez\",\n        authorImage: imagePlaceholders[77],\n        authorHref: \"#\",\n        image: imagePlaceholders[62],\n        pubDate: new Date(\"2026-01-20\"),\n      }}\n      dateFormat=\"MMMM d, yyyy\"\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"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 section","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author information","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero media","required":false},"proseClassName":{"type":"string","description":"Additional CSS classes for the prose content","required":false},"post":{"type":"object","description":"Content metadata (title, author, media, etc.)","fields":{"title":{"type":"string","description":"","required":false},"authorName":{"type":"string","description":"","required":false},"authorHref":{"type":"string","description":"","required":false},"image":{"type":"string","description":"","required":false},"pubDate":{"type":"object","description":"","typeLabel":"Date","required":false},"description":{"type":"string","description":"","required":false},"authorImage":{"type":"string","description":"","required":false}},"typeLabel":"ArticleHeroProsePost","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides post.image)","typeLabel":"React.ReactNode","required":false},"authorSlot":{"type":"object","description":"Custom slot for author information (overrides post author fields)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"dateFormat":{"type":"string","description":"Date format string (date-fns format)","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","hero","prose","long-form","author","avatar","tables","alerts","blockquotes"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to only use the post.authorName, post.authorImage, post.authorHref, and post.authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"},{"id":"article-sidebar-sticky","name":"Article Sidebar Sticky","title":"Article Sidebar Sticky","category":"Article","categorySlug":"article","description":"A two-column article layout with a sticky sidebar containing author information and a back navigation link. The main content area features prose styling with images and blockquotes. Perfect for documentation-style articles or blog posts where persistent author attribution and navigation are important.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293082/8ieqwud2y2uz91buoxj3uzb45enf/cleanshot-2026-03-03-at-13-05-35.png","mobile":"https://cdn.ing/assets/i/r/293081/491xz1v2xe8p4ty1wnj7o0ijwp40/cleanshot-2026-03-03-at-13-05-53.png"},"componentPath":"blocks/article/article-sidebar-sticky.tsx","code":"import { ArticleSidebarSticky } from \"@opensite/ui/blocks/article/article-sidebar-sticky\";\nimport {\n  imagePlaceholders,\n  LONG_FORM_MARKDOWN_STRING,\n  optixFlowApiKey,\n} from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleSidebarSticky\n      backHref=\"#\"\n      backText=\"Back to Blog\"\n      title=\"Mastering React Server Components: A Deep Dive\"\n      authorName=\"Emma Thompson\"\n      authorImage={imagePlaceholders[2]}\n      authorHref=\"#\"\n      publishDate=\"January 18, 2026\"\n      heroImageSrc={imagePlaceholders[56]}\n      heroImageAlt=\"React Server Components architecture\"\n      background=\"white\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={1}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n      optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"summary":{"type":"object","description":"Optional Summary to be placed below the title","typeLabel":"React.ReactNode","required":false},"summaryClassName":{"type":"string","description":"Additional CSS classes for the summary","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"backLinkClassName":{"type":"string","description":"Additional CSS classes for the back link","required":false},"backHref":{"type":"string","description":"Back link href","required":false},"backText":{"type":"object","description":"Back link text","typeLabel":"React.ReactNode","required":false},"backIcon":{"type":"object","description":"Back link icon (defaults to chevron-left)","typeLabel":"React.ReactNode","required":false},"backLinkSlot":{"type":"object","description":"Custom slot for back link (overrides backHref, backText, backIcon)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"sidebarContent":{"type":"object","description":"Sidebar content","typeLabel":"React.ReactNode","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","sidebar","sticky","author","navigation","prose","two-column","documentation"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to only use the authorName, authorImage, authorHref, and authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"},{"id":"article-toc-sidebar","name":"Article TOC Sidebar","title":"Article TOC Sidebar","category":"Article","categorySlug":"article","description":"An article layout with a sticky table of contents sidebar that highlights the active section as users scroll. Includes a CTA card in the sidebar, category badge, author info, and IntersectionObserver-based section tracking. Ideal for technical tutorials, guides, and long-form content that benefits from easy navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293075/6sklzdhioqhnbjryewz6wue05qx4/cleanshot-2026-03-03-at-12-00-32.png","mobile":"https://cdn.ing/assets/i/r/293074/m3131lck7hsql683f9l84ua6wy6d/cleanshot-2026-03-03-at-12-00-44.png"},"componentPath":"blocks/article/article-toc-sidebar.tsx","code":"import { ArticleTocSidebar } from \"@opensite/ui/blocks/article/article-toc-sidebar\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleTocSidebar\n      category=\"Development\"\n      title=\"Building Scalable Systems: A Comprehensive Guide\"\n      description=\"Learn the principles, patterns, and practices that enable applications to grow gracefully from prototype to production scale.\"\n      authorName=\"Michael Zhang\"\n      authorImage={imagePlaceholders[88]}\n      authorHref=\"#\"\n      publishDate=\"January 12, 2026\"\n      readTime=\"20 min read\"\n      heroImageSrc={imagePlaceholders[95]}\n      heroImageAlt=\"Scalable architecture diagram\"\n      sections={[\n        { id: \"introduction\", title: \"Introduction\" },\n        { id: \"getting-started\", title: \"Getting Started\" },\n        { id: \"core-concepts\", title: \"Core Concepts\" },\n        { id: \"best-practices\", title: \"Best Practices\" },\n        { id: \"conclusion\", title: \"Conclusion\" },\n      ]}\n      ctaTitle=\"Want to Learn More?\"\n      ctaDescription=\"Join our upcoming workshop on scalable system design and architecture patterns.\"\n      ctaActions={[\n        {\n          label: \"Register for Workshop\",\n          href: \"#\",\n          variant: \"default\",\n          className: \"w-full\",\n        },\n      ]}\n      enableTocTracking={true}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header section","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Category badge text","typeLabel":"React.ReactNode","required":false},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"TOC sections array","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleTocSection"},"typeLabel":"ArticleTocSection[]","required":false},"tocSlot":{"type":"object","description":"Custom slot for TOC (overrides sections array)","typeLabel":"React.ReactNode","required":false},"renderSectionLink":{"type":"object","description":"Render callback for section links (overrides default rendering)","typeLabel":"( section: ArticleTocSection, isActive: boolean, ) => React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"ctaTitle":{"type":"object","description":"CTA section title","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA section description","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"CTA actions","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides CTA props)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render (when renderMode is \"markdown\")","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableTocTracking":{"type":"boolean","description":"Enable scroll-based section tracking","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","toc","table-of-contents","sidebar","sticky","navigation","tutorial","guide","cta"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to adhere to the required markdown formatting to inject `id` attributes for each section that map exactly to the `sections` `id` value. Ensure to only use the authorName, authorImage, authorHref, and authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable! Only provide valid `ctaActions` and only provide a `ctaTitle` and `ctaDescription` if you have actual `ctaActions` (typically only 1 ctaAction looks best)."},{"id":"article-breadcrumb-social","name":"Article Breadcrumb Social","title":"Article Breadcrumb Social","category":"Article","categorySlug":"article","description":"A comprehensive article layout featuring breadcrumb navigation, social sharing buttons, a sticky table of contents sidebar, and a floating back-to-top button. Includes author information with role, read time, and IntersectionObserver-based section tracking. Perfect for content-heavy articles that need robust navigation and sharing capabilities.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293090/hoh2ao05dwia3s4ap3gitbe3vbxv/cleanshot-2026-03-03-at-13-28-59.png","mobile":"https://cdn.ing/assets/i/r/293089/qr1mwbjz0ww9ox7rx6jnqu4sohwg/cleanshot-2026-03-03-at-13-29-17.png"},"componentPath":"blocks/article/article-breadcrumb-social.tsx","code":"import { ArticleBreadcrumbSocial } from \"@opensite/ui/blocks/article/article-breadcrumb-social\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleBreadcrumbSocial\n      breadcrumbs={[\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Technology\", href: \"#\" },\n      ]}\n      background=\"white\"\n      pattern=\"p6\"\n      patternOpacity={1}\n      currentPage=\"Building Scalable Web Applications\"\n      title=\"Building Scalable Web Applications in 2026\"\n      author={{\n        name: \"Sarah Mitchell\",\n        image: imagePlaceholders[9],\n        role: \"Senior Software Architect\",\n      }}\n      publishDate=\"January 15, 2026\"\n      readTime=\"12 min read\"\n      heroImageSrc={imagePlaceholders[42]}\n      heroImageAlt=\"Modern web application architecture\"\n      sections={[\n        { id: \"overview\", title: \"Overview\" },\n        { id: \"key-features\", title: \"Key Features\" },\n        { id: \"implementation\", title: \"Implementation\" },\n        { id: \"performance\", title: \"Performance Metrics\" },\n        { id: \"summary\", title: \"Summary\" },\n      ]}\n      enableTocTracking={true}\n      enableBackToTop={true}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"breadcrumbClassName":{"type":"string","description":"Additional CSS classes for the breadcrumb","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content area","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC container","required":false},"breadcrumbs":{"type":"array","description":"Breadcrumb navigation items","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"BreadcrumbItemConfig"},"typeLabel":"BreadcrumbItemConfig[]","required":false},"breadcrumbsSlot":{"type":"object","description":"Custom slot for rendering breadcrumbs (overrides breadcrumbs array)","typeLabel":"React.ReactNode","required":false},"currentPage":{"type":"object","description":"Current page name in breadcrumb","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"string","description":"Article summary/description","required":false},"author":{"type":"object","description":"Author configuration","fields":{"name":{"type":"string","description":"","required":false},"image":{"type":"string","description":"","required":false},"role":{"type":"string","description":"","required":false}},"typeLabel":"ArticleAuthorConfig","required":false},"authorSlot":{"type":"object","description":"Custom slot for rendering author info (overrides author config)","typeLabel":"React.ReactNode","required":false},"publishDate":{"type":"object","description":"Publish date text","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time text","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"Table of contents sections","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleBreadcrumbSection"},"typeLabel":"ArticleBreadcrumbSection[]","required":false},"tocSlot":{"type":"object","description":"Custom slot for rendering TOC (overrides sections array)","typeLabel":"React.ReactNode","required":false},"renderSectionLink":{"type":"object","description":"Render callback for section links (overrides default rendering)","typeLabel":"( section: ArticleBreadcrumbSection, isActive: boolean, ) => React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableTocTracking":{"type":"boolean","description":"Enable scroll-based TOC tracking","required":false},"enableBackToTop":{"type":"boolean","description":"Enable back to top button","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","breadcrumb","social-sharing","toc","back-to-top","navigation","author","read-time"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to adhere to the required markdown formatting to inject `id` attributes for each section that map exactly to the `sections` `id` value. Ensure to only use the author.ame, author.image, and author.role fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"},{"id":"article-compact-toc","name":"Article Compact TOC","title":"Article Compact TOC","category":"Article","categorySlug":"article","description":"A compact, mobile-friendly article layout with a collapsible table of contents, breadcrumb navigation, and inline social sharing buttons. Features a centered content area with author info, read time, and publication date. Ideal for research papers, studies, and articles that need a clean, focused reading experience on all devices.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293092/4v2rlq4p4za5hnsby385in3o2u8w/cleanshot-2026-03-03-at-13-40-01.png","mobile":"https://cdn.ing/assets/i/r/293091/hv0py46jnstvdhy1i1vbk17kywhv/cleanshot-2026-03-03-at-13-40-18.png"},"componentPath":"blocks/article/article-compact-toc.tsx","code":"import { ArticleCompactToc } from \"@opensite/ui/blocks/article/article-compact-toc\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\n/**\n * ArticleCompactToc Demo\n *\n * Key Feature: Mobile-optimized collapsible Table of Contents\n * - TOC appears below the article meta on mobile/tablet screens\n * - Click \"Table of Contents\" button to expand/collapse navigation\n * - Automatically tracks active section as you scroll\n * - Sections are linked and clickable for quick navigation\n *\n * To see the TOC in action: resize your browser to mobile width (< 1024px)\n */\nexport default function Demo() {\n  return (\n    <ArticleCompactToc\n      breadcrumbs={[\n        { label: \"Research\", href: \"#research\" },\n        { label: \"Studies\", href: \"#studies\" },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n      currentPage=\"User Behavior Analysis\"\n      title=\"Understanding User Behavior in Modern Web Applications\"\n      authorName=\"Dr. Jennifer Park\"\n      authorHref=\"#\"\n      publishDate=\"January 22, 2026\"\n      readTime=\"8 min read\"\n      heroImageSrc={imagePlaceholders[5]}\n      heroImageAlt=\"User behavior analytics visualization\"\n      sections={[\n        { id: \"introduction\", title: \"Introduction\" },\n        { id: \"methodology\", title: \"Methodology\" },\n        { id: \"results\", title: \"Results\" },\n        { id: \"discussion\", title: \"Discussion\" },\n        { id: \"conclusion\", title: \"Conclusion\" },\n      ]}\n      enableTocTracking={true}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"breadcrumbClassName":{"type":"string","description":"Additional CSS classes for the breadcrumb","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"metaClassName":{"type":"string","description":"Additional CSS classes for the meta info","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"breadcrumbs":{"type":"array","description":"Breadcrumb navigation items","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"BreadcrumbItemConfig"},"typeLabel":"BreadcrumbItemConfig[]","required":false},"breadcrumbsSlot":{"type":"object","description":"Custom slot for rendering breadcrumbs (overrides breadcrumbs array)","typeLabel":"React.ReactNode","required":false},"currentPage":{"type":"object","description":"Current page name in breadcrumb","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"string","description":"Article summary/description","required":false},"authorName":{"type":"object","description":"Author name","typeLabel":"React.ReactNode","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"TOC sections array","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleCompactTocSection"},"typeLabel":"ArticleCompactTocSection[]","required":false},"tocSlot":{"type":"object","description":"Custom slot for TOC (overrides sections array)","typeLabel":"React.ReactNode","required":false},"renderSectionLink":{"type":"object","description":"Render callback for section links (overrides default rendering)","typeLabel":"( section: ArticleCompactTocSection, isActive: boolean, ) => React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableTocTracking":{"type":"boolean","description":"Enable scroll-based section tracking","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","toc","collapsible","mobile-friendly","compact","breadcrumb","social-sharing","research"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to adhere to the required markdown formatting to inject `id` attributes for each section that map exactly to the `sections` `id` value. Ensure to only use the authorName, authorImage, authorHref, and authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"},{"id":"article-chapters-author","name":"Article Chapters Author","title":"Article Chapters Author","category":"Article","categorySlug":"article","description":"A book-style article layout with numbered chapters navigation in a sticky sidebar, detailed author bio with social links, and a conclusion CTA card. Features breadcrumb navigation, centered title section, and IntersectionObserver-based chapter tracking. Perfect for comprehensive guides, tutorials, and educational content organized into distinct chapters.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293088/ffidy6dd0oux8j9j98bnnkvdusb2/cleanshot-2026-03-03-at-13-22-35.png","mobile":"https://cdn.ing/assets/i/r/293087/fza7b6gqmv42zwt7exjdv4ddn42c/cleanshot-2026-03-03-at-13-22-54.png"},"componentPath":"blocks/article/article-chapters-author.tsx","code":"import { ArticleChaptersAuthor } from \"@opensite/ui/blocks/article/article-chapters-author\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleChaptersAuthor\n      breadcrumbs={[\n        { label: \"Resources\", href: \"#resources\" },\n        { label: \"Guides\", href: \"#guides\" },\n      ]}\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.7}\n      background=\"muted\"\n      currentPage=\"Design Patterns\"\n      title=\"The Complete Guide to Design Patterns\"\n      subtitle=\"Master the fundamental patterns that power modern software architecture\"\n      heroImageSrc={imagePlaceholders[73]}\n      heroImageAlt=\"Software architecture visualization\"\n      chapters={[\n        { id: \"chapter-1\", number: 1, title: \"The Foundation\" },\n        { id: \"chapter-2\", number: 2, title: \"Building Blocks\" },\n        { id: \"chapter-3\", number: 3, title: \"Advanced Patterns\" },\n        { id: \"chapter-4\", number: 4, title: \"Real-World Applications\" },\n        { id: \"chapter-5\", number: 5, title: \"Future Directions\" },\n      ]}\n      author={{\n        name: \"Dr. Marcus Chen\",\n        role: \"Principal Engineer\",\n        image: imagePlaceholders[88],\n        bio: \"Marcus has over 15 years of experience designing large-scale distributed systems. He's the author of three books on software architecture and a frequent speaker at tech conferences.\",\n        socialLinks: [\n          {\n            href: \"https://instagram.com\",\n          },\n          {\n            href: \"https://twitter.com\",\n          },\n          {\n            href: \"https://linkedin.com\",\n          },\n          {\n            href: \"https://youtube.com\",\n          },\n        ],\n      }}\n      conclusionTitle=\"Ready to Master Design Patterns?\"\n      conclusionDescription=\"Take your software architecture skills to the next level with our comprehensive course and interactive workshops.\"\n      conclusionActions={[\n        {\n          label: \"Enroll in Course\",\n          href: \"#\",\n          variant: \"default\",\n        },\n        {\n          label: \"Download Resources\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      enableChapterTracking={true}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"breadcrumbClassName":{"type":"string","description":"Additional CSS classes for the breadcrumb","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header section","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"chaptersClassName":{"type":"string","description":"Additional CSS classes for the chapters nav","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author card","required":false},"conclusionClassName":{"type":"string","description":"Additional CSS classes for the conclusion section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"breadcrumbs":{"type":"array","description":"Breadcrumb navigation items","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"BreadcrumbItemConfig"},"typeLabel":"BreadcrumbItemConfig[]","required":false},"breadcrumbsSlot":{"type":"object","description":"Custom slot for rendering breadcrumbs (overrides breadcrumbs array)","typeLabel":"React.ReactNode","required":false},"currentPage":{"type":"object","description":"Current page name in breadcrumb","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Article subtitle","typeLabel":"React.ReactNode","required":false},"chapters":{"type":"array","description":"Chapter navigation items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"number":{"type":"number","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleChapter"},"typeLabel":"ArticleChapter[]","required":false},"chaptersSlot":{"type":"object","description":"Custom slot for rendering chapters nav (overrides chapters array)","typeLabel":"React.ReactNode","required":false},"renderChapterLink":{"type":"object","description":"Render callback for chapter links (overrides default rendering)","typeLabel":"( chapter: ArticleChapter, isActive: boolean, ) => React.ReactNode","required":false},"author":{"type":"object","description":"Author configuration","fields":{"name":{"type":"string","description":"","required":false},"image":{"type":"string","description":"","required":false},"role":{"type":"string","description":"","required":false}},"typeLabel":"ArticleAuthorConfig","required":false},"authorSlot":{"type":"object","description":"Custom slot for rendering author info (overrides author config)","typeLabel":"React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"conclusionTitle":{"type":"object","description":"Conclusion section title","typeLabel":"React.ReactNode","required":false},"conclusionDescription":{"type":"object","description":"Conclusion section description","typeLabel":"React.ReactNode","required":false},"conclusionActions":{"type":"array","description":"Conclusion CTA actions","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"conclusionSlot":{"type":"object","description":"Custom slot for conclusion section (overrides conclusion props)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableChapterTracking":{"type":"boolean","description":"Enable scroll-based chapter tracking","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","chapters","book-style","author-bio","social-links","sidebar","guide","tutorial","educational"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to adhere to the required markdown formatting to inject `id` attributes for each chapter that map exactly to the `chapters` `id` value. Ensure to only use the author.ame, author.image, author.bio, author.socialLinks, and author.role fields if you have actual data to populate those fields, using empty/fake data is not acceptable! Ensure to ONLY use valid `href` values for the `conclusionActions`"},{"id":"article-split-animated","name":"Article Split Animated","title":"Article Split Animated","category":"Article","categorySlug":"article","description":"A visually striking split-layout article preview with Framer Motion animations. Features a large image on one side with a gradient overlay and category badge, and article details on the other side including title, description, author info, and CTA button. Ideal for featured article sections, hero posts, and content that needs to make a strong visual impact.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293086/wxm4qvz857xl5ykeldtdvkr0j84i/cleanshot-2026-03-03-at-13-16-14.png","mobile":"https://cdn.ing/assets/i/r/293085/el52rouxd7894hfqv1czgnpv6k0s/cleanshot-2026-03-03-at-13-16-25.png"},"componentPath":"blocks/article/article-split-animated.tsx","code":"import { ArticleSplitAnimated } from \"@opensite/ui/blocks/article/article-split-animated\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleSplitAnimated\n      image={imagePlaceholders[31]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n      imageAlt=\"AI-powered development workflow\"\n      category=\"Artificial Intelligence\"\n      categoryHref=\"#\"\n      title=\"The Future of AI-Assisted Development\"\n      description=\"Discover how artificial intelligence is transforming the software development lifecycle, from code generation to automated testing and deployment.\"\n      authorName=\"Dr. Raj Patel\"\n      authorImage={imagePlaceholders[67]}\n      authorRole=\"AI Research Lead\"\n      authorHref=\"#\"\n      publishDate=\"January 25, 2026\"\n      readTime=\"15 min read\"\n      ctaActions={[\n        {\n          label: \"Read Full Article\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      enableAnimations={true}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"categoryClassName":{"type":"string","description":"Additional CSS classes for the category badge","required":false},"metaClassName":{"type":"string","description":"Additional CSS classes for the meta info (date, read time)","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides image)","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"React.ReactNode","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Category text","typeLabel":"React.ReactNode","required":false},"categoryHref":{"type":"string","description":"Category link href","required":false},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"CTA actions","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides ctaActions)","typeLabel":"React.ReactNode","required":false},"enableAnimations":{"type":"boolean","description":"Enable entrance animations","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","split-layout","animated","framer-motion","featured","hero","visual-impact","cta"],"performance":{},"importantUsageNotes":"ONLY use this block as an article hero/preview — it does not render a full article body. Ensure 'authorName', 'authorImage', and 'authorRole' are only populated with real, verified author data; do not fabricate author information. Only populate 'image' with a real image URL; DO NOT USE PLACEHOLDERS. If you supply 'ctaActions', use a variant of 'default' for the primary CTA and 'outline' for any secondary CTA. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:36.492Z"}