{"success":true,"data":{"block":{"id":"carousel-badge-cards","name":"Carousel Badge Cards","title":"Carousel Badge Cards","category":"Gallery","categorySlug":"gallery","description":"A carousel gallery with badge labels and descriptions on each card. Features navigation buttons, smooth transitions, and cards with category badges. Ideal for product showcases, feature highlights, blog posts, or any content that benefits from categorization and horizontal browsing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290129/xljicunqunevhtf5jtkiur0exwfa/carousel-badge-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290128/4lenpq7hjsduc9caq31dsha8b0iy/carousel-badge-cards-mobile.png"},"componentPath":"blocks/gallery/carousel-badge-cards.tsx","code":"import { CarouselBadgeCards } from \"@opensite/ui/blocks/gallery/carousel-badge-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselBadgeCards\n      heading=\"Featured Case Studies\"\n      items={[\n        {\n          id: \"1\",\n          title: \"AI-Powered Analytics Platform\",\n          description:\n            \"Transforming raw data into actionable business intelligence through advanced machine learning algorithms and predictive analytics.\",\n          label: \"Analytics\",\n          href: \"#\",\n          image: imagePlaceholders[20],\n          imageAlt: \"Analytics dashboard interface\",\n        },\n        {\n          id: \"2\",\n          title: \"Enterprise Cloud Migration\",\n          description:\n            \"Seamless transition of legacy infrastructure to modern cloud architecture, reducing costs by 40% while improving performance.\",\n          label: \"Cloud\",\n          href: \"#\",\n          image: imagePlaceholders[21],\n          imageAlt: \"Cloud infrastructure visualization\",\n        },\n        {\n          id: \"3\",\n          title: \"E-commerce Personalization Engine\",\n          description:\n            \"Dynamic product recommendations powered by AI, increasing conversion rates by 35% and customer satisfaction scores.\",\n          label: \"E-commerce\",\n          href: \"#\",\n          image: imagePlaceholders[22],\n          imageAlt: \"E-commerce platform\",\n        },\n        {\n          id: \"4\",\n          title: \"Healthcare Data Integration\",\n          description:\n            \"Unified patient data platform enabling real-time insights and improving care coordination across multiple facilities.\",\n          label: \"Healthcare\",\n          href: \"#\",\n          image: imagePlaceholders[23],\n          imageAlt: \"Healthcare technology\",\n        },\n        {\n          id: \"5\",\n          title: \"Financial Risk Management\",\n          description:\n            \"Real-time fraud detection system processing millions of transactions daily with 99.9% accuracy.\",\n          label: \"Finance\",\n          href: \"#\",\n          image: imagePlaceholders[24],\n          imageAlt: \"Financial dashboard\",\n        },\n      ]}\n      readMoreText=\"Read more\"\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of card items to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the item","required":true},"title":{"type":"object","description":"Title of the card","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"Badge label text","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Link URL for the card","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false}},"typeLabel":"CarouselBadgeCardItem"},"typeLabel":"CarouselBadgeCardItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for the \"Read more\" link","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","badges","cards","navigation","products","features","categories"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'items' array for this badge-card carousel; the demo uses 5. Each item requires a real image from the media library. DO NOT USE this block unless you have at least 4 real images from the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:11.336Z"}