Team Grid
Team member grid
Overview
Displays team members in a card grid or a horizontally scrollable carousel. The grid variant uses Avatar components inside cards, while the carousel variant shows a prominent photo with a name/role footer and optional link arrow.
Usage
import { TeamGrid } from "@leanicon/web-builder-library";Default (four columns)
Grid layout with four member cards.
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
- D
David Lee
Lead Engineer
Three columns
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
Two columns
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
With social links
Each member shows social platform links below their role.
Without photos (initials fallback)
When photo is omitted, the Avatar renders a fallback with the first letter of the name.
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
- D
David Lee
Lead Engineer
With animation
Cards animate in with a staggered slide-up effect.
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
- D
David Lee
Lead Engineer
Carousel
Horizontally scrollable layout with larger photos and navigation buttons. Members with href show an arrow link.
Carousel — without heading
Dark mode
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
- D
David Lee
Lead Engineer
With social links — dark mode
Without photos — dark mode
- A
Alice Johnson
CEO & Co-founder
- B
Bob Smith
CTO
- C
Carol White
Head of Design
- D
David Lee
Lead Engineer
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of team members (required) |
|
| — | Optional heading (used in carousel header) |
|
|
| Layout variant |
|
|
| Number of grid columns (grid layout only) |
|
| — | Animation config for grid members |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
TeamMember
Field | Type | Description |
|---|---|---|
|
| Member name (required) |
|
| Job title/role (required) |
|
| Avatar photo — falls back to name initial |
|
| Social platform links (grid layout) |
|
| Link URL — shows arrow icon (carousel layout) |
TeamGridAnimation
Field | Type | Description |
|---|---|---|
|
| Animation for heading text |
|
| Animation for member cards ( |
Notes
- Grid layout: uses Avatar components inside Card. Social links display as text below the role.
- Carousel layout: shows full-size photos in scrollable cards with nav buttons. Members with
hrefshow anArrowUpRighticon. - The carousel hides the scrollbar and provides left/right chevron buttons for navigation.
- Animation is disabled automatically when the user prefers reduced motion.
- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
members | TeamMember[] | — | Yes | |
heading | string | — | No | |
layout | enum | grid | No | |
columns | enum | 4 | No | |
cardVariant | enum | avatar | No | Card style for the grid layout: `avatar` (circular portrait) or `photo` (full-bleed image with a name/role footer, matching the carousel cards). |
animation | TeamGridAnimation | — | No | |
colorScheme | enum | — | No | |
className | string | — | No |