Team

People as a grid of cards or a list with bios.

Last updated

People

The team

Ada LovelaceAL
Ada LovelaceDesign
Alan TuringAT
Alan TuringEngineering
GH
Grace HopperDocs
Katherine JohnsonKJ
Katherine JohnsonResearch
Show code
<Team heading="The team" items={[{ name, role, avatar?, bio?, links? }, …]} />

Add

npx @ava-ui/apogee add team

API

Prop Type Default Category Description
eyebrow, heading, description string — content Optional header.
items { name, role, avatar?, bio?, links? }[] — content Required. bio shows in list.
label string English content Landmark name when there is no heading.
layout 'grid' | 'list' 'grid' layout
align 'start' | 'center' 'start' layout
background, spacing, headingLevel, id layout As on every section.

Layouts

With bios

  • Ada LovelaceAL
    Ada LovelaceDesign

    Draws the system and keeps it honest.

  • Alan TuringAT
    Alan TuringEngineering

    Owns the build and the gates.

  • GH
    Grace HopperDocs

    Writes the pages you are reading.

  • Katherine JohnsonKJ
    Katherine JohnsonResearch

    Measures everything twice.

Centred on a tint

Ada LovelaceAL
Ada LovelaceDesign
Alan TuringAT
Alan TuringEngineering
GH
Grace HopperDocs
Katherine JohnsonKJ
Katherine JohnsonResearch
Show code
<Team layout="list" items={…} />
<Team align="center" background="neutral-faded" items={…} />

Accessibility

  • Avatars carry the person’s name; links are real links with the focus ring.