Capabilities Grid
Six capability tiles in a three-column grid each with a label and one sentence describing the concrete output, suited to generalist or multi-discipline practices.
Six capability tiles in a three-column grid each with a label and one sentence describing the concrete output, suited to generalist or multi-discipline practices.
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
Capabilities Grid spreads six capability tiles across a 3-column grid: User research, Interaction design, Visual design, Design systems, Front-end development, and Accessibility. Each tile holds a label and one sentence that says what the work actually produces, for example WCAG AA compliance baked into the design process, not retrofitted during QA at the end. The lede positions the block: a broader view of the work I take on, for clients who need more than one thing handled.
Capabilities are one array of six objects. The grid reads as an inventory rather than a menu, which suits generalist creatives whose clients rarely hire for one discipline in isolation.
Reach for this block where a short services list would under-sell a broad practice, typically on an about page or a services page below a focused services block. The installer swaps the six labels and sentences for the disciplines they actually cover.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the generalist capability overview for a full-stack designer. Other grid uses:
Tip: the sentence under each label earns the tile; a label alone is a keyword list, a sentence tells a client what they would actually receive.