With Filters
A team directory with category filters that sort members by department or location. Helps visitors find the right person inside a large company.
A team directory with category filters that sort members by department or location. Helps visitors find the right person inside a large company.
Search blocks by description or jump to a page.
With Filters opens with a centered heading and subheading, then a row of filter buttons, one per department category plus an "All" option. Below that sits a four column card grid. Each card holds a circular portrait, the member's name, their position title, and a row of three social icon buttons for Twitter, GitHub, and LinkedIn. Clicking a filter button instantly narrows the grid to only the members whose role matches, swapping the button to its filled state to show which filter is active.
The heading copy, subheading, filter labels, and member data are all independent. You can add or remove categories, adjust the number of members in each group, or drop social links you do not need without affecting the rest of the layout. The grid reflows to fewer columns on smaller viewports automatically.
Reach for this block when your roster is large enough that visitors might want to jump straight to a specific department rather than scan every face. On a healthcare scheduling product it works well as the "Meet the care team" section, letting patients filter to physicians, support staff, or billing contacts before they book. It handles that task better than a flat grid because the filter row removes the visual noise of roles the visitor does not care about right now.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Any team large enough to split across two or more meaningful categories is a good fit. A few specific ways to use the filter groups:
Tip: keep the number of filter categories between three and six. Too few and the filter adds no value; too many and the button row wraps awkwardly on mobile.