Team carousel
BlockA large two-tone heading over a swipeable carousel of team member cards — avatar, name, role and a line under a divider — with previous and next buttons.
- Sections
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add team-carouselimport { DEFAULT } from "@/components/blocks/team-carousel"; export default function Page() { return <DEFAULT />;}<TeamCarouselBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Developers, engineers and designers working together on tools people enjoy using." |
heading | ReactNode | "Tech pioneers" |
headingLevelLevel of the section heading; each member's name is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
labels | Partial<TeamCarouselLabels> | — |
members | TeamCarouselMember[] | DEFAULT_TEAM_CAROUSEL |
subheadingA muted second line of the heading. | ReactNode | "building the future" |
Plus every attribute of <section> except title.
Follows the APG carousel pattern: the section is a carousel named by its heading, each card a group with the "slide" role description and a position name ("2 of 6"). The track is a native scroll-snap scroller — swipeable on touch, and once it overflows a focusable, named region the keyboard can scroll — and the previous/next buttons are named, disabled at the ends, mirrored for right-to-left pages and visible at every width. The source's five-second autoplay is removed (WCAG 2.2.2); a button press announces the new position politely. Portraits have empty alt because the name is read next.