Phases Grid
Four project phases in a two-column card grid, each card naming what happens, the concrete deliverable, and the typical duration.
Four project phases in a two-column card grid, each card naming what happens, the concrete deliverable, and the typical duration.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Phases Grid presents four project phases as a 2x2 card grid, each card naming the phase, what happens during it, the deliverable, and the duration in tabular-nums. The lede commits to the structure, every engagement follows the same four phases and the durations shift with project size but the structure does not. Discovery runs 1 to 2 weeks and ends with a problem statement and agreed scope; Handoff runs 1 week and ends with an asset export, handoff doc, and a one-page decisions log.
Phases are a typed array with number, name, what, deliverable, and duration fields. The deliverable section at the bottom of each card with its overline label is the distinctive detail: it answers the question the client always has before they ask it.
Reach for this block on a services or process page where the installer wants to set client expectations about the shape of an engagement before a discovery call. The installer swaps the phase names, what-happens copy, deliverables, and durations to match their own working method.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the four-phase engagement overview. Other grid shapes:
Tip: the deliverable line is the promise; keep it specific enough that the client knows exactly what file or document they receive, not just the category of work.