{"success":true,"data":{"block":{"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/308418/gsryhfv3acwx0q9swvs9xtqp812w/article-split-animated-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308417/i82pr6xk8ifd56ju1bv8lurohrq0/article-split-animated-mobile.jpg"},"componentPath":"blocks/article/article-split-animated.tsx","code":"import { ArticleSplitAnimated } from \"@opensite/ui/blocks/article/article-split-animated\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae\";\n\nexport default function Demo() {\n  return (\n    <ArticleSplitAnimated\n      image={ARTICLE_IMAGE_URL}\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={ARTICLE_IMAGE_URL}\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":true,"maxLength":90},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":true,"maxLength":220},"image":{"type":"string","description":"Hero image source URL","required":true,"mediaHints":{"path":"image","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Featured article image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"imageAlt":{"type":"string","description":"Hero image alt text","required":true,"maxLength":140},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides image)","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"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."}},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"React.ReactNode","required":false,"maxLength":80},"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,"maxLength":40},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false,"maxLength":30},"category":{"type":"object","description":"Category text","typeLabel":"React.ReactNode","required":false,"maxLength":50},"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":true,"minItems":1,"maxItems":2},"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}},"exampleProps":{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI-assisted development workflow","category":"Artificial Intelligence","categoryHref":"#","title":"The Future of AI-Assisted Development","description":"A source-backed featured article about how AI is changing software delivery workflows.","authorName":"Dr. Raj Patel","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorRole":"AI Research Lead","authorHref":"#","publishDate":"January 25, 2026","readTime":"15 min read","ctaActions":[{"label":"Read Full Article","href":"#","variant":"default","size":"lg"}],"enableAnimations":true},"dependencies":["@opensite/ui"],"tags":["article","blog-post","split-layout","animated","framer-motion","featured","hero","visual-impact","cta"],"performance":{},"importantUsageNotes":"Use for a featured article or hero post preview, not as a full article body. image and authorImage must be absolute image URLs only, never placeholder variables, relative /images paths, logos, favicons, or video URLs. Use ctaActions ActionConfig objects; this component does not accept ctaText or ctaHref props.","usageRequirements":{"requiredProps":["title","description","image","imageAlt","ctaActions"],"propConstraints":{"title":{"required":true,"maxLength":90},"description":{"required":true,"maxLength":220},"image":{"required":true,"note":"Absolute featured article image URL. IMAGE MEDIA ONLY."},"imageAlt":{"required":true,"maxLength":140},"category":{"required":false,"maxLength":50},"authorName":{"required":false,"maxLength":80,"note":"Must identify a real article author or organization byline when supplied."},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"authorRole":{"required":false,"maxLength":80},"publishDate":{"required":false,"maxLength":40},"readTime":{"required":false,"maxLength":30},"ctaActions":{"required":true,"minItems":1,"maxItems":2,"note":"Use ActionConfig objects; do not use ctaText or ctaHref."}},"mediaSlots":{"image":{"path":"image","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Featured article image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"authorImage":{"path":"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.","Use ctaActions instead of unsupported ctaText or ctaHref props."]}}},"timestamp":"2026-06-27T19:54:48.165Z"}