Process With Deliverables
Four stage cards each split into a process description on the left and the named artifact it produces on the right, from the brief to the spec.
Four stage cards each split into a process description on the left and the named artifact it produces on the right, from the brief to the spec.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Process With Deliverables pairs each of four stages with the concrete artifact it produces: Discovery yields the brief (a written document both parties sign off before anything else starts), Exploration yields the direction deck, Design yields the prototype (a clickable file used for stakeholder sign-off), and Handoff yields the spec (annotated files plus a short doc of decisions made so future designers know the why).
Steps are one array with description and artifact fields. The two-column card layout with a visible divider is the distinctive detail, placing the artifact beside the stage rather than after it keeps the output visible without a separate deliverables list.
Reach for this block on a services or process page where clients need to know exactly what they receive and when. The installer swaps the stage names, artifact names, and artifact descriptions to match their real deliverables.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the four-stage deliverable map. Other configurations:
Tip: the artifact name is the promise, the brief and the spec are what clients quote back in a reference call, so name the document they will actually receive.