T-Shaped Skills
An asymmetric split pairing one deep discipline, unpacked as a ruled card of facets, with a breadth column of two labeled skill chip groups.
An asymmetric split pairing one deep discipline, unpacked as a ruled card of facets, with a breadth column of two labeled skill chip groups.
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
T-Shaped Skills renders the classic one-deep, many-broad shape as an asymmetric split. The wider card on the left unpacks a single discipline, interaction design, as a ruled divide-y list of five facets, each with a name and a sentence of detail. The narrower right column shows the breadth around it as two labeled chip groups, one for skills fluent alongside the core and one for skills conversant enough to collaborate, closed by a line explaining what fluent and conversant each mean.
Depth facets and breadth groups are two typed arrays. The distinction between the two chip groups is the deliberate choice: it separates skills the person can carry from skills they can review and brief, which a single tag cloud would flatten.
Reach for this block on a skills or about page when the installer wants to show a clear specialism without hiding the supporting range around it. The installer swaps the deep discipline and its facets, then the two breadth groups, keeping the fluent versus conversant split meaningful.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the specialist designer profile. Other shapes:
Tip: keep the depth card to one discipline; two deep columns turn a T into a flat list and lose the whole point of the shape.