Search blocks by description or jump to a page.
A grid of teammate profiles with photos, titles, and contact buttons. Use it on an about page or internal directory to introduce the whole team.
Team Grid opens with a page heading row: a "Team" title and a short subtitle on the left, and an "Add Member" button on the right. Below that sits a responsive card grid, one to three columns wide depending on viewport. Each card holds a square avatar, the member's name, job title, and a department badge, plus a three-dot dropdown menu in the top-right corner with Message and Permissions actions. A small colored dot below the main content shows that person's current status, such as Active, Away, or Do not disturb.
Every element in a card is independent. You can swap the six demo members for your real roster, rename the department badges to match your org structure, and adjust the status labels to whatever states your presence system produces. The heading row copy and the "Add Member" button are plain text and can be rewritten or hidden without changing the grid below.
Reach for this block on an internal people directory or a team management screen inside a developer tools product. It works well when you need to show a modest roster at a glance and also give admins a fast path to message or adjust permissions for any person. Compared to the Compact List, which packs many rows into a tight table, this grid layout gives each person enough breathing room for a photo and a badge, making it easier to scan by face or department rather than by row.
A natural flow around it on an Application page:
Before
After
Each card surfaces three distinct pieces of information per person, all swappable without restructuring the layout:
Tip: if your roster grows past a dozen people, add a search input above the grid so users can filter by name or department without scrolling through every card.