Back to Components

Process Steps

grettech

A 4-step horizontal methodology timeline displaying key phases of a project.

Props

PropTypeDefaultDescription
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