{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","grid","steps","cards","icons","numbered","methodology","services","workflow"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'steps' since the steps element is a 3-column grid layout (2 rows of 3). Each step requires an 'icon', 'title', and 'description'. This is a purely descriptive process block — no stat values or image URLs are required. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:37:41.929Z"}