{"success":true,"data":{"block":{"id":"process-icon-timeline","name":"Process Icon Timeline","title":"Process Icon Timeline","category":"Process","categorySlug":"process","description":"A vertical timeline with colored icon badges and alternating left/right card layout. Each step features a customizable colored badge with icon, title, description, and optional highlight tags. The timeline line connects all steps visually. Perfect for detailed process flows, project phases, or methodology explanations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/309637/i3m7gqqz9lso2emvz1bzx86ude5x/process-icon-timeline-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/309638/n4h67uxyy5rm17ojy6otedpt3piv/process-icon-timeline-mobile.jpg"},"componentPath":"blocks/process/process-icon-timeline.tsx","code":"import { ProcessIconTimeline } from \"@opensite/ui/blocks/process/process-icon-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessIconTimeline\n      heading=\"Product Development Timeline\"\n      description=\"From concept to launch, our proven process ensures success at every milestone.\"\n      background=\"dark\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.1}\n      steps={[\n        {\n          icon: \"lucide/lightbulb\",\n          title: \"Concept & Validation\",\n          description:\n            \"Validate your idea through market research, competitive analysis, and user interviews. Define the value proposition and identify target markets.\",\n          highlights: [\n            \"Market Research\",\n            \"User Surveys\",\n            \"Competitive Analysis\",\n          ],\n        },\n        {\n          icon: \"lucide/layout\",\n          title: \"Design & Wireframing\",\n          description:\n            \"Create detailed wireframes and user flows. Develop a cohesive design system that scales across your product.\",\n          highlights: [\"Wireframes\", \"Design System\", \"User Flows\"],\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Development Sprint\",\n          description:\n            \"Build the MVP with agile methodology. Implement core features with clean, maintainable code and automated testing.\",\n          highlights: [\"Agile Sprints\", \"Code Reviews\", \"Automated Tests\"],\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Beta Testing\",\n          description:\n            \"Launch beta program with early adopters. Gather feedback, fix bugs, and refine features based on real user behavior.\",\n          highlights: [\"User Feedback\", \"Bug Fixes\", \"Feature Refinement\"],\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Production Launch\",\n          description:\n            \"Deploy to production with comprehensive monitoring. Execute go-to-market strategy and provide ongoing customer support.\",\n          highlights: [\n            \"Production Deploy\",\n            \"Marketing Launch\",\n            \"Customer Support\",\n          ],\n        },\n      ]}\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/lightbulb\")","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},"highlights":{"type":"array","description":"List of highlight tags","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessIconTimelineItem"},"typeLabel":"ProcessIconTimelineItem[]","required":true,"minItems":3,"maxItems":8},"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},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline container","required":false},"timelineLineClassName":{"type":"string","description":"Additional CSS classes for the timeline line","required":false},"stepCardClassName":{"type":"string","description":"Additional CSS classes for each step card","required":false},"stepBadgeClassName":{"type":"string","description":"Additional CSS classes for the step icon 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},"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":"","required":true},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":220},"steps[].highlights":{"type":"object","description":"","maxItems":5}},"exampleProps":{"heading":"Product Development Timeline","description":"From concept to launch, our proven process ensures success at every milestone.","steps":[{"icon":"lucide/lightbulb","title":"Concept & Validation","description":"Validate your idea through research and user interviews.","highlights":["Market Research","User Surveys","Competitive Analysis"]},{"icon":"lucide/layout","title":"Design & Wireframing","description":"Create wireframes and a cohesive design system.","highlights":["Wireframes","Design System","User Flows"]},{"icon":"lucide/code","title":"Development Sprint","description":"Build the MVP with agile methodology.","highlights":["Agile Sprints","Code Reviews","Automated Tests"]},{"icon":"lucide/rocket","title":"Production Launch","description":"Deploy to production and execute go-to-market.","highlights":["Production Deploy","Marketing Launch","Customer Support"]}],"spacing":"xl","background":"gray"},"dependencies":["@opensite/ui"],"tags":["process","timeline","icons","badges","vertical","alternating","phases","methodology","highlights"],"performance":{},"importantUsageNotes":"Renders a zigzag icon-badge timeline. icon must be a Lucide icon identifier string (e.g. 'lucide/rocket'). Icon badges use bg-primary/text-primary-foreground automatically. highlights are small pill badges shown under the description. No image props — this block is icon/text only.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":8},"steps[].icon":{"required":true,"note":"Lucide icon string, e.g. 'lucide/rocket'."},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":220},"steps[].highlights":{"maxItems":5,"note":"Short tag strings shown as pills."}},"mediaSlots":{}}}},"timestamp":"2026-06-27T19:58:02.998Z"}