Filterable Work Grid
A filterable work grid with category chips and a live count that narrows six project tiles by discipline, naming the kind, role, and year per tile.
A filterable work grid with category chips and a live count that narrows six project tiles by discipline, naming the kind, role, and year per tile.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Filterable Work Grid shows six projects across Web, Branding, and Mobile disciplines behind a row of category chips, All, Web, Branding, Mobile, each chip carrying its live count. Pressing a chip narrows the grid via useState and updates the showing-N-of-6 line below. Each tile names the client type, the role (Lead product design, Visual identity system, Design and prototyping), and the year, so filtering is informative rather than decorative.
Projects are one typed array, categories a string union, the chip row aria-pressed for accessibility. The count line is the distinctive detail: it confirms a filter is active and sets an honest expectation of breadth.
Reach for this block as the work section of a homepage or a dedicated work page for a multi-discipline creative who needs to let visitors self-select by interest. The installer swaps project names, categories, roles, and years, and adds or removes category values to match their actual practice.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the broad-practice selected-work grid. Other filterable uses:
Tip: three to four categories is the sweet spot, more chips make the row wrap and lose the glanceable quality that makes filtering worth the interaction cost.