Phase Allocation
A heading and intro above a segmented proportional bar, with a ruled legend listing each phase, its percentage share, and what the time buys.
A heading and intro above a segmented proportional bar, with a ruled legend listing each phase, its percentage share, and what the time buys.
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
Phase Allocation shows how a typical engagement splits across four phases as one segmented proportional bar, then repeats the phases as a ruled legend beneath it. Each legend row pairs a color swatch and phase name with its percentage share and a sentence on what that time buys, from a short but decisive discovery through design and build, feedback and iteration, and handoff and support.
Phases are one array driving both the bar and the legend; each object carries a title, a percent that sets its bar width, a color, and a description. The proportional bar is the distinctive detail, making the honest split between making and the work around it visible before a word of the legend is read.
Reach for this block on a services or process page where a client wants to understand where their budget and schedule actually go across a project. The installer swaps the four phase names, percentages, and descriptions to match their own typical engagement.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the honest time split for a six week freelance engagement. Other allocations:
Tip: the descriptions carry the honesty, name what a small slice still decides so the percentages read as deliberate rather than rounded.