Grid With Categories
A work index that groups project tiles under discipline category headings, each with a scope description and an archive link, so visitors navigate directly to the work type they need.
A work index that groups project tiles under discipline category headings, each with a scope description and an archive link, so visitors navigate directly to the work type they need.
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
Grid With Categories groups eight projects under three discipline headings: Product design, Brand identity, and Art direction. Each category opens with a heading, a one- line description of the scope, and an All category link, then a four-column tile row where each tile shows the project name, role, and year. Sable sits under Brand identity as Brand and packaging, 2024; Outline Mag sits under Art direction as Art director, 2023.
Categories are one typed array with a nested projects array. The category header with its own description and archive link is the distinctive choice; it lets visitors navigate to the work type that matters to them.
Reach for this block as the work section of a portfolio that spans multiple disciplines and needs to let visitors self-select without scrolling through a mixed grid. The installer swaps the category headings, descriptions, and project rows for their own practice.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the discipline-organised work index. Other categorised grid uses:
Tip: write the category description to say who the work is for, not just what it is; Product design for software teams is more useful than Design work.