{"success":true,"data":{"block":{"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/308414/9jhhnu0e4cpp3lyoh1rb5fwe0nm6/article-hero-prose-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308413/5rukvx6zsxmag8s61eshd8bzgmht/article-hero-prose-mobile.jpg"},"componentPath":"blocks/article/article-hero-prose.tsx","code":"import { ArticleHeroProse } from \"@opensite/ui/blocks/article/article-hero-prose\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\";\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: ARTICLE_IMAGE_URL,\n        authorHref: \"#\",\n        image: ARTICLE_IMAGE_URL,\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":true,"mediaHints":{"path":"post.authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"maxLength":12000},"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},"post.title":{"type":"object","description":"","required":true,"maxLength":90},"post.description":{"type":"object","description":"","required":true,"maxLength":220},"post.authorName":{"type":"object","description":"","required":true,"maxLength":80},"post.pubDate":{"type":"object","description":"","required":true},"post.image":{"type":"object","description":"","required":true},"post.authorImage":{"type":"object","description":"","required":false}},"exampleProps":{"post":{"title":"The Evolution of Modern JavaScript","description":"A source-backed analysis of how modern JavaScript patterns changed production web development.","authorName":"Alex Rodriguez","authorHref":"#","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","pubDate":"2026-01-20T00:00:00.000Z"},"dateFormat":"MMMM d, yyyy","markdownString":"## Overview\nModern article layouts need clear hierarchy, source-backed metadata, and media that supports the story.\n\n## Implementation\nUse concise section headings that map to the navigation items and keep body copy grounded in the article source.\n\n## Conclusion\nClose with a practical takeaway and one clear next action for readers."},"dependencies":["@opensite/ui"],"tags":["article","blog-post","hero","prose","long-form","author","avatar","tables","alerts","blockquotes"],"performance":{},"importantUsageNotes":"Use for a full long-form article with a strong hero image, author metadata, and rich prose. The post.image and post.authorImage props must be absolute image URLs only, never logos, favicons, placeholder variables, relative /images paths, or video media. Use markdownString for the article body and keep post metadata source-backed.","usageRequirements":{"requiredProps":["post","markdownString"],"propConstraints":{"post":{"required":true,"note":"Source-backed article metadata object."},"post.title":{"required":true,"maxLength":90},"post.description":{"required":true,"maxLength":220},"post.authorName":{"required":true,"maxLength":80,"note":"Must identify a real article author or organization byline."},"post.pubDate":{"required":true,"note":"Use a real publication date as a Date-compatible value."},"post.image":{"required":true,"note":"Absolute hero image URL. IMAGE MEDIA ONLY."},"post.authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"markdownString":{"required":true,"maxLength":12000,"note":"Long-form markdown article body."}},"mediaSlots":{"post.image":{"path":"post.image","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Primary article hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"post.authorImage":{"path":"post.authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["blog_posts","team_members","media_library"],"notes":["Article titles, authors, dates, summaries, chapter names, and body copy must come from source-backed article or blog data. Do not invent bylines or publication metadata.","All article media values must be absolute URLs to real image assets. Do not use relative paths, placeholder media variables, logos, favicons, or video URLs in image props."]}}},"timestamp":"2026-06-27T20:05:28.984Z"}