{"success":true,"data":{"block":{"id":"process-hover-cards","name":"Process Hover Cards","title":"Process Hover Cards","category":"Process","categorySlug":"process","description":"A process section with hover-activated cards that reveal floating images on desktop. Each step displays a mono-font number, title, and description with smooth hover transitions. The floating image appears with a fade-in animation when hovering. Ideal for interactive process showcases and service overviews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290538/roag3w8ld9hxnei8f3rbzdjjhtbo/process-hover-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290539/u9toe2q9b5q3a5rjekbrs8cvxe68/process-hover-cards-mobile.png"},"componentPath":"blocks/process/process-hover-cards.tsx","code":"import { ProcessHoverCards } from \"@opensite/ui/blocks/process/process-hover-cards\";\n\nexport default function Demo() {\n  return (\n    <ProcessHoverCards\n      heading=\"How We Work\"\n      description=\"A streamlined approach to delivering exceptional digital experiences\"\n      steps={[\n        {\n          step: \"01\",\n          title: \"Ideate & Define\",\n          description:\n            \"Transform your vision into a clear project scope with detailed requirements, user personas, and success metrics.\",\n          image: \"https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y\",\n        },\n        {\n          step: \"02\",\n          title: \"Design & Prototype\",\n          description:\n            \"Create stunning interfaces that balance aesthetics with usability, validated through user testing and stakeholder feedback.\",\n          image: \"https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz\",\n        },\n        {\n          step: \"03\",\n          title: \"Build & Integrate\",\n          description:\n            \"Develop robust solutions using cutting-edge technologies, with seamless integration of APIs, databases, and third-party services.\",\n          image: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\n        },\n        {\n          step: \"04\",\n          title: \"Test & Refine\",\n          description:\n            \"Ensure quality through comprehensive testing, performance optimization, and iterative improvements based on real-world usage.\",\n          image: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n        },\n        {\n          step: \"05\",\n          title: \"Deploy & Scale\",\n          description:\n            \"Launch your product with confidence and scale it efficiently as your user base grows, with ongoing monitoring and support.\",\n          image: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n        },\n      ]}\n      background=\"secondary\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image URL for hover reveal","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessHoverCardItem"},"typeLabel":"ProcessHoverCardItem[]","required":true,"minItems":3,"maxItems":7,"mediaHints":{"path":"steps[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Hover-reveal image for each step row. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","required":false},"hoverImageClassName":{"type":"string","description":"Additional CSS classes for the hover image container","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":200},"steps[].image":{"type":"object","description":"","required":false}},"exampleProps":{"heading":"How We Work","description":"A streamlined approach to delivering exceptional digital experiences.","steps":[{"step":"01","title":"Ideate & Define","description":"Transform your vision into a clear project scope.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"02","title":"Design & Prototype","description":"Create stunning interfaces validated through testing.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"03","title":"Build & Integrate","description":"Develop robust solutions with seamless integration.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"04","title":"Deploy & Scale","description":"Launch confidently and scale as your user base grows.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}],"background":"secondary"},"dependencies":["@opensite/ui"],"tags":["process","hover","interactive","cards","image","animation","services","steps"],"performance":{},"importantUsageNotes":"On desktop, hovering a row reveals the step image in a floating card on the right. On mobile the image is shown inline above the text. image is optional per step — omit to show the step as text-only. Provide absolute URLs; do not use placeholder variables.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":7},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":200},"steps[].image":{"required":false,"note":"Absolute URL. If provided, shown on hover (desktop) or inline (mobile)."}},"mediaSlots":{"steps[].image":{"path":"steps[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Hover-reveal image for each step row. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T19:54:24.902Z"}