# Team blocks
The people section of an about or careers page. The block is one `.svelte`
file built from `SvAvatar`, `SvSegmented`, `SvBadge` and `SvButton`, themed
from the `--sg-*` tokens. Avatars are initials on a color picked from the
name, so there are no photos to host until you add them.
## Installation
Add the whole group, or one block by its name (shown under each demo):
See them first with `npx @svgrid/ui try blocks/team`. No project needed.
## Team grid
A card per person with an `SvAvatar`, name, role, a short bio, an email link,
a profile link where the person has one, and their department. The
`SvSegmented` filter above the grid narrows it to Engineering, Product or
Customer, and the dashed "We're hiring" card at the end lists the open roles
for the same filter, or says there are none and offers Send an application.
The icon links are labelled "Email Grace Liu" and "Grace Liu's profile". Cards
fill as many 200 px columns as fit, down to one on a phone, where the filter
stretches to the full width.
> Live demo: Team grid block - https://svgrid.com/demos/649-block-team-grid/
`npx @svgrid/ui add team-grid`
## Your people and open roles
The block's `
```
```svelte
```
The heading's "Ten people across three time zones" line is sample copy in the
markup; change it with your own numbers.
## Headless
The block is a styled render of the core in its `
```
`shown` and `openRoles` are derived from `dept`, `deptLabel(value)` turns a
department value into its label, and `contactProps` sets the `href` and an
`aria-label` that names the person.
## See also
- [UI blocks overview](https://svgrid.com/docs/help/ui-blocks/index/)
- [SvAvatar](https://svgrid.com/docs/help/ui-components/sv-avatar/)
- [SvSegmented](https://svgrid.com/docs/help/ui-components/sv-segmented/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/team/ . All docs: https://svgrid.com/llms.txt