Back to Components
Process Steps
grettech
A 4-step horizontal methodology timeline displaying key phases of a project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Optional CSS classes to apply. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Accepts all standard HTML div attributes (id, style, etc). |
title | string | "Our 4-Step Process" | Section title. |
subtitle | string | "From strategy to launch, we handle design, development, and growth—end to end." | Section subtitle. |
steps | ProcessStep[] | - | Array of steps in the process. |
title | string | - | Step title. |
content | string | - | Step description content. |
step | string | - | Step identifier (e.g., '01'). |
icon | React.ReactNode | - | Icon component. |
image | string | - | URL for the step image. |
Key Features
- Horizontal connecting timeline on desktop
- Prominent numbered step indicators
- Centered, readable typography