A team section is a trust signal that most sites file under decoration. For a small company it is one of the few places a reader can check that real people are behind the product, which makes it worth more than its usual treatment - a grid of headshots with job titles and no links.
25 public components on 21st have "team" in the name. The layouts are settled; what to put in them is the part worth deciding.
The shapes
Team Showcase by Mak VieSAinte is the magazine-style version, a three-column staggered photo layout, and Team Showcase by Ravi Katiyar is the animated grid.
Team Member Card by Shatlyk1011 is the single card with social links revealed on hover, Kinetic Team Hybrid by Daiwiik Harihar is the motion-led roster, and Team by Cnippet is the plain grid.
What makes it a trust signal
Real photos of the actual people. Stock photography here does the opposite of what the section is for, and a careful reader spots it instantly, as the testimonial guide argues about faces beside quotes.
Links out. A name that links to a profile, a personal site or a public record of the person's work is checkable. A name that links nowhere is a string.
Titles that mean something. "Engineering" tells a reader nothing; "Builds the sync engine" tells them who to talk to.
Everyone, or a reason. A four-person company showing four people is honest. A forty-person company showing four is a leadership section, and labelling it as such costs nothing.
Where it belongs
Not on the landing page, usually. The landing page guide has nine blocks and a team section is not one of them, because a reader deciding whether to try a product does not need the org chart.
Where it earns its place: an about page, a careers page, and a pricing or enterprise page where the reader is deciding whether the company will still exist in a year. For a consultancy or an agency, where the people are the product, it belongs much closer to the front.
The markup worth adding
A team section is a list of people, and Person structured data is one of the few uncontroversially useful applications of schema, per the avatar guide. Name, job title, the organisation, and the links out.
The reason to bother is not a rich result. It is that an answer engine asked who runs a company reads exactly this markup, and a page that identifies its people in a machine-readable way is the one it can answer from.
Two accessibility notes that get missed. The photo next to a name should have an empty alt, since the name is already text. And social links need accessible names - "Sarah on GitHub", not a bare icon - which is the same rule the icon guide sets out for any icon-only link.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Avatar and Card underneath your own layout | No section |
| CSS grid | The layout, which is a few lines | You design the composition |
| 21st | Magazine, animated and card-based team layouts | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What makes a team section a trust signal?
- Real photos of the actual people, links out to profiles or public work so the names can be checked, titles that say what someone does rather than which department they sit in, and either everyone or an honest label such as leadership.
- Should a landing page have a team section?
- Usually not. A reader deciding whether to try a product does not need the org chart. It earns its place on an about page, a careers page and an enterprise page, and much closer to the front for a consultancy where the people are the product.
- Is Person schema worth adding?
- Yes, and not for a rich result. An answer engine asked who runs a company reads exactly that markup, so a page that identifies its people in a machine-readable way is the one it can answer from. Name, job title, organisation and the links out.
- What alt text should a team photo have?
- Empty, when the person's name is already text beside it, otherwise a screen reader reads the name twice. Social links need accessible names too, such as Sarah on GitHub rather than a bare icon.