{"success":true,"data":{"block":{"id":"expandable-case-study-cards","name":"Expandable Case Study Cards","title":"Expandable Case Study Cards","category":"Gallery","categorySlug":"gallery","description":"A gallery of expandable case study cards with hover effects. Each card expands on hover to reveal additional details including title, description, and badge. Features smooth width transitions and gradient overlays. Ideal for portfolios, case studies, project showcases, and work samples where you want to highlight multiple items with progressive disclosure.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290131/f9fr56cjd09bl4ouj1euhsm7opxm/expandable-case-study-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290130/uolv3hf3cbfmfgzzklrx1000t8nd/expandable-case-study-cards-mobile.png"},"componentPath":"blocks/gallery/expandable-case-study-cards.tsx","code":"import { ExpandableCaseStudyCards } from \"@opensite/ui/blocks/gallery/expandable-case-study-cards\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ExpandableCaseStudyCards\n      title=\"Explore Our Case Studies\"\n      description=\"Discover our solutions\"\n      items={[\n        {\n          id: \"1\",\n          title: \"Global E-commerce Transformation\",\n          href: \"#\",\n          image: imagePlaceholders[110],\n          imageAlt: \"E-commerce platform\",\n          logo: brandLogoPlaceholders.black[0],\n          logoAlt: \"TechCorp logo\",\n          company: \"TechCorp\",\n          description:\n            \"Revolutionizing online retail with a scalable, AI-driven platform that enhanced user experience and boosted sales by 50%.\",\n          badges: [\"E-commerce\", \"Cloud\", \"AI\"],\n        },\n        {\n          id: \"2\",\n          title: \"Healthcare Data Platform\",\n          href: \"#\",\n          image: imagePlaceholders[111],\n          imageAlt: \"Healthcare platform\",\n          logo: brandLogoPlaceholders.black[1],\n          logoAlt: \"MediSync logo\",\n          company: \"MediSync\",\n          description:\n            \"Integrating patient data across multiple systems to provide real-time insights, improving care quality and operational efficiency.\",\n          badges: [\"Healthcare\", \"HIPAA\", \"Integration\"],\n        },\n        {\n          id: \"3\",\n          title: \"Financial Services Modernization\",\n          href: \"#\",\n          image: imagePlaceholders[112],\n          imageAlt: \"Financial platform\",\n          logo: brandLogoPlaceholders.black[2],\n          logoAlt: \"FinanceFlow logo\",\n          company: \"FinanceFlow\",\n          description:\n            \"Implementing a secure, compliant fintech platform that streamlined transactions and enhanced user trust, resulting in a 30% increase in customer retention.\",\n          badges: [\"Fintech\", \"Security\", \"Compliance\"],\n        },\n        {\n          id: \"4\",\n          title: \"Manufacturing IoT Solution\",\n          href: \"#\",\n          image: imagePlaceholders[113],\n          imageAlt: \"IoT platform\",\n          logo: brandLogoPlaceholders.black[3],\n          logoAlt: \"IndustrialTech logo\",\n          company: \"IndustrialTech\",\n          description:\n            \"Deploying an IoT-enabled manufacturing platform that optimized production processes, reduced downtime by 25%, and improved overall equipment effectiveness.\",\n          badges: [\"IoT\", \"Manufacturing\", \"Real-time\"],\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.25}\n      spacing=\"py-12 md:py-40\"\n    />\n  );\n}","propsSchema":{"title":{"type":"string","description":"Section title (displayed above cards)","required":false},"description":{"type":"string","description":"Section description/subtitle (displayed above cards)","required":false},"items":{"type":"array","description":"Array of case study 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 case study","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description for the case study","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"Link URL for the case study","required":true},"image":{"type":"string","description":"Background image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the background image","required":false},"logo":{"type":"string","description":"Company logo source URL (optional)","required":false},"logoAlt":{"type":"string","description":"Alt text for the logo","required":false},"company":{"type":"string","description":"Company name","required":false},"badges":{"type":"array","description":"Array of badge labels","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"ExpandableCaseStudyItem"},"typeLabel":"ExpandableCaseStudyItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the cards container","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},"logoClassName":{"type":"string","description":"Additional CSS classes for each logo","required":false},"badgesClassName":{"type":"string","description":"Additional CSS classes for the badges container","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","case-study","portfolio","expandable","hover","cards","projects","work","showcase"],"performance":{},"importantUsageNotes":"Provide exactly 4 items in the 'items' array since the expandable layout is designed for a 4-card row. Each item requires a real image ('image') from the media library; optionally supply a real company logo ('logo') from the media library — do not invent logo URLs. 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:41:29.585Z"}