Team Detail Card

About this block

Team Detail Card is the team profile: the Engineering team, badged as Core team, with its purpose statement (builds and operates the Acme platform, owns infrastructure, product APIs, and developer tooling), then Avery Stone as lead with email, a stacked row of five visible avatars plus a +9 overflow chip for the 14-member total, quick links to the Team space and On-call rota, and a Request to join primary button next to View all members.

Lead and members are separate typed constants; the visible avatar slice and extraCount are derived at module level. Links are a typed array so adding a wiki or runbook is one array entry.

When to use

Reach for this block as a team profile panel on a directory detail route or in a sidebar when a user clicks a team badge. Wire the join button to your membership request endpoint.

A natural flow around it on an Application Pro page:

Before

• Team directory

After

• Role assignment panel
• Data table

What you can display

One strong use is the Engineering team profile. Other team card uses:

• Design team. Smaller member count, Figma link instead of on-call rota.
• External partner team. Lead from outside the org, a contract end date in the purpose line.
• Auto-created team. A generated name, zero members, Replace lead as the primary action.

Tip: the avatar overflow chip keeps the card compact regardless of team size; always derive extraCount from the total, not the visible slice.