{"success":true,"data":{"block":{"id":"process-steps-grid","name":"Process Steps Grid","title":"Process Steps Grid","category":"Process","categorySlug":"process","description":"A grid layout of process step cards with large background numbers and icons. Each card features an icon in a colored badge, title, description, and a decorative oversized step number in the background. Hover effects highlight the active card. Perfect for showcasing methodologies, service processes, or workflow steps.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290548/anj1zqohw7wt62ij5fngz2e06svf/process-steps-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290549/f4cbe3uw695nx0qfamd0erk678pm/process-steps-grid-mobile.png"},"componentPath":"blocks/process/process-steps-grid.tsx","code":"import { ProcessStepsGrid } from \"@opensite/ui/blocks/process/process-steps-grid\";\n\nexport default function Demo() {\n  return (\n    <ProcessStepsGrid\n      heading=\"Getting Started is Simple\"\n      description=\"Follow our straightforward onboarding process to go from signup to success in minutes.\"\n      steps={[\n        {\n          icon: \"lucide/user-plus\",\n          title: \"Create Your Account\",\n          description: \"Sign up in seconds with email or social login. No credit card required to start your free trial.\",\n        },\n        {\n          icon: \"lucide/settings\",\n          title: \"Configure Your Workspace\",\n          description: \"Customize your environment with templates, integrations, and team settings tailored to your workflow.\",\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Invite Your Team\",\n          description: \"Collaborate effectively by inviting team members and assigning roles with granular permissions.\",\n        },\n        {\n          icon: \"lucide/upload\",\n          title: \"Import Your Data\",\n          description: \"Seamlessly migrate existing data from spreadsheets, databases, or other platforms with our import tools.\",\n        },\n        {\n          icon: \"lucide/palette\",\n          title: \"Customize & Brand\",\n          description: \"Apply your brand colors, logos, and styling to create a cohesive experience for your users.\",\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Launch & Grow\",\n          description: \"Go live with confidence and scale your operations using our robust infrastructure and support.\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"gray\"\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":{"icon":{"type":"string","description":"Icon name for the step (e.g., \"lucide/search\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","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":"ProcessStepsGridItem"},"typeLabel":"ProcessStepsGridItem[]","required":true,"minItems":3,"maxItems":9},"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},"stepsGridClassName":{"type":"string","description":"Additional CSS classes for the steps grid","required":false},"stepCardClassName":{"type":"string","description":"Additional CSS classes for each step card","required":false},"stepIconClassName":{"type":"string","description":"Additional CSS classes for the step icon 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[].icon":{"type":"object","description":""},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":200}},"exampleProps":{"heading":"Getting Started is Simple","description":"Follow our straightforward onboarding process to go from signup to success in minutes.","steps":[{"icon":"lucide/user-plus","title":"Create Your Account","description":"Sign up in seconds. No credit card required."},{"icon":"lucide/settings","title":"Configure Your Workspace","description":"Customise with templates and integrations for your workflow."},{"icon":"lucide/users","title":"Invite Your Team","description":"Assign roles and collaborate with granular permissions."},{"icon":"lucide/upload","title":"Import Your Data","description":"Migrate existing data with our import tools."},{"icon":"lucide/palette","title":"Customise & Brand","description":"Apply your brand colours and styling."},{"icon":"lucide/rocket","title":"Launch & Grow","description":"Go live and scale with robust infrastructure."}],"spacing":"xl","background":"gray"},"dependencies":["@opensite/ui"],"tags":["process","grid","steps","cards","icons","numbered","methodology","services","workflow"],"performance":{},"importantUsageNotes":"Grid of numbered cards with optional Lucide icons. Auto-numbers each card with a large background numeral. icon is a Lucide icon string (e.g. 'lucide/rocket'). No image props. Works best with 3 or 6 steps (fills 3-column grid evenly). iconSlot overrides icon if you need a custom element.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":9},"steps[].icon":{"note":"Lucide icon string, e.g. 'lucide/rocket'. Optional but recommended."},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":200}},"mediaSlots":{}}}},"timestamp":"2026-06-27T19:52:44.085Z"}