Team grid
BlockA heading over a grid of team members — a large portrait, name, role, location and bio — rising in one after another.
- Sections
- 1 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add team-gridimport { DEFAULT } from "@/components/blocks/team-grid"; export default function Page() { return <DEFAULT />;}<TeamGridBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "A small group of people who care about the details and about the people who use what we make." |
heading | ReactNode | "Our team" |
headingLevelLevel of the section heading; each member's name is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
members | TeamGridMember[] | DEFAULT_TEAM_GRID |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`); members are a list and each name is a heading one level below, so a screen reader can jump person to person. Portraits have empty alt text because the name is read next — a described photo would say the name twice — and the initials fallback is aria-hidden for the same reason. Only a grid starting below the fold is held back to animate, never under reduced motion.