{"success":true,"data":{"block":{"id":"feature-image-overlay-badge","name":"Feature Image Overlay Badge","title":"Feature Image Overlay Badge","category":"Features","categorySlug":"features","description":"Two-column layout with content and an image featuring gradient overlay with avatar badge and CTA. Left side has heading, description, and feature list. Right side has image with gradient overlay, avatar badge, and floating CTA.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290495/v25jehl6gpwq8req8y7bceuwagcl/feature-image-overlay-badge-desktop.png","mobile":"https://cdn.ing/assets/i/r/290494/tm7vyl9rm7u1rq2lmpvis7szcxyd/feature-image-overlay-badge-mobile.png"},"componentPath":"blocks/features/feature-image-overlay-badge.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureImageOverlayBadge } from \"@opensite/ui/blocks/features/feature-image-overlay-badge\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureImageOverlayBadge\n      badge=\"Customer Success Story\"\n      title=\"See How Teams Are Building Faster\"\n      description=\"Join thousands of developers who have accelerated their workflow and shipped products faster with our platform.\"\n      actions={[\n        {\n          label: \"Read Full Story\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View All Stories\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      imageSrc={imagePlaceholders[59]}\n      imageAlt=\"Customer success story\"\n      avatarSrc={imagePlaceholders[13]}\n      avatarBadgeText=\"Featured\"\n      overlayTitle=\"TechCorp reduces deployment time by 90%\"\n      overlayLinkText=\"Read their journey\"\n      overlayLinkUrl=\"#\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","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},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"avatarSrc":{"type":"string","description":"Avatar image URL","required":false},"avatarBadgeText":{"type":"object","description":"Avatar badge text content","typeLabel":"React.ReactNode","required":false},"overlayTitle":{"type":"object","description":"Overlay title content","typeLabel":"React.ReactNode","required":false},"overlayLinkText":{"type":"object","description":"Overlay link text content","typeLabel":"React.ReactNode","required":false},"overlayLinkUrl":{"type":"string","description":"Overlay link URL","required":false},"overlayLinkOnClick":{"type":"object","description":"onClick handler for overlay link","typeLabel":"() => void","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},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"overlayClassName":{"type":"string","description":"Additional CSS classes for the overlay","required":false},"avatarBadgeClassName":{"type":"string","description":"Additional CSS classes for the avatar badge","required":false},"overlayTitleClassName":{"type":"string","description":"Additional CSS classes for the overlay title","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},"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":["features","image","overlay","badge","avatar","gradient","cta","two-column"],"performance":{},"importantUsageNotes":"Only use this block if you have a valid real image for 'imageSrc' and an optional real avatar image for 'avatarSrc' — do not use placeholder/stock images. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:27.592Z"}