Capability Cards
Three capability cards each with a title, a plain-language approach sentence, and a ruled method list covering Product design, Design systems, and Front-end implementation.
Three capability cards each with a title, a plain-language approach sentence, and a ruled method list covering Product design, Design systems, and Front-end implementation.
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
Capability Cards presents three broad capabilities as cards: Product design, Design systems, and Front-end implementation. Each card holds a title, a sentence describing the approach in plain terms (for product design: "taking a product from rough problem statement to shipped screens"), and a ruled list of five specific methods or deliverables beneath a divider. The heading "What I actually do" and the lede about owning work end to end set the voice before the cards.
Capabilities are one typed array. The sentence plus methods structure is the distinctive choice: a title alone is a claim, a sentence plus a method list is a brief.
Reach for this block on an about page or a services page as a more narrative alternative to a chips list. The installer swaps the three capability titles, the sentences, and the method lists for their own work.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the end-to-end product designer brief. Other configurations:
Tip: the sentence should say what you actually do in that area, not describe the category; "closing the gap between spec and browser" is more useful than "frontend development."