Team Page
团队页
Aliases:团队页团队成员页团队介绍页关于我们团队我们是谁页面公司团队页成员介绍页团队墙
What is it
A page that introduces an organization through a grid of person cards: avatar, name, role and a one-line responsibility form the smallest unit, grouped by team or function, often with an open-roles link and a values narrative. It replaces the abstract we with specific, recognizable people to build trust.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- A company or product needs to show its core members
- Hiring and trust-building need real faces
- The organization groups naturally by team or function
✕ When not to use
- Only one founder to show — use an about page
- Member details are sensitive or change often
- Detailed resumes and portfolios — use profile pages
Variants
Photo Grid
照片网格
Even avatar grid with bios on hover
Roster
名册式
Compact list grouped by department
Featured
焦点式
Large portrait plus a longer bio for key members
Page structure
- 01
Header
One line of mission or scale sets the tone.
- 02
Member grid
Even-width cards with a consistent avatar crop.
- 03
Team groups
Sections by function or department, each with a short heading.
- 04
Member card
Avatar, name, role and one line, linking to a profile.
- 05
Careers CTA
A closing link to open roles captures interest.
Implementation
gridflexaspect-ratio: 1grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))object-fit: coverLay out the member grid with repeat(auto-fit, minmax(140px, 1fr)); crop avatars to aspect-ratio: 1 with object-fit: cover and real alt text. Cards may lift on hover but must disable under reduced-motion. Department filters stay keyboard reachable, and each card is a focusable link rather than a decorative div.
Related concepts
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsContainsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsContainsAn identity-centered page answering "who is this, what do they have, what do they do": cover and avatar establish visual identity, name, bio and stats follow, and tabs switch between content streams like posts, works or articles. Visitors see follow/message actions; the owner sees edit entries — same structure, different actions.
PagesSimilarOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed with