Search blocks by description or jump to a page.
Four project phases in a two-column card grid, each card naming what happens, the concrete deliverable, and the typical duration.
The source for every Portfolio block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.