Team sections

The people behind the product, with round or square photos, bios and links, in grids, cards, mosaics, glass panels or a scrolling row.

Last updated

Each example is a block: a Section with a SectionHeader and a list of people. Each person has a photo, a name (a heading), a role, and in most layouts a short bio and three links. The scrolling rows use Carousel; the glass panels sit on the photo with a frosted surface that keeps the text readable.

npx @ava-ui/apogee add team/simple-01

Copy is props

Every block in this family takes the same content props (TeamContent in sections/_shared/team.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The Team section takes the same names for the props they share.

  • eyebrow: The small label above the heading.

  • heading: The heading.

  • description: The line under the heading.

  • label: Accessible name for the landmark or the people carousel.

  • items: People.

  • primaryAction: The solid button by the heading.

  • secondaryAction: The outline button by the heading.

  • Pass null to hide an optional part, such as description={null}.

  • Some blocks add props of their own; the top of each block’s file lists them.

Simple 01A centred heading over eight people with round photos, names and roles.
Simple 02A heading over eight people with round photos, bios and links.
Simple 03A heading and actions beside six people with round photos, bios and links.
Simple 04A centred heading and actions over eight people in grey cards.
Image card 01A centred heading and actions over eight people with square photos and bios.
Image card 02A heading with actions beside it, over eight people with square photos.
Image card 03A heading over eight people in two columns, each photo beside a bio and links.
Image card 04A heading with actions over a scrolling row of people with square photos and bios.
Image collage 01A centred heading and actions over a mosaic of eight people with details on glass panels.
Image collage 02A heading and actions beside a collage of five team photos.
Image glass 01A centred heading and actions over six portraits with details on inset glass panels.
Image glass 02A heading with actions beside it, over six portraits with details on flush glass panels.
Image glass 03A heading and actions beside four portraits with details on glass panels.
Image glass 04A heading with actions over a scrolling row of portraits with glass panels.
Board membersA centred heading on a grey band over four investors with round photos, their firm, a bio and links.

Related

TeamPeople as a grid of cards or a list with bios.
ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.
CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.