Tag Heavy Card
A three-column project grid where each card leads with a prominent row of skill and tool tags before the description, for technical work where the stack signals as much as the outcome.
A three-column project grid where each card leads with a prominent row of skill and tool tags before the description, for technical work where the stack signals as much as the outcome.
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
Tag Heavy Card shows three technical projects in a three-column grid, each opening with a Placeholder thumbnail then surfacing a dense row of skill and tool tags (Figma, React, Design tokens, Accessibility, Figma, Storybook, iOS, Android) before the description paragraph. The section heading reads Technical work, and the lede says the tools and discipline were as important as the design decisions.
Projects are a typed array where tags is a string array per project. The inverted order, tags before description, is the distinctive choice: it lets a hiring manager or client scan the stack first, then read the outcome.
Reach for this block in a portfolio section aimed at technical or cross-disciplinary work where the stack signals as much as the deliverable. The installer swaps in their own projects, replaces the Placeholder images, and updates the tag list to their real tools.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is a design-systems or front-end portfolio where the tech stack is a selling point. Other uses:
Tip: keep the tag list to the six or seven most distinctive terms; a row of twelve tags reads as noise.