Figma marketing website team sections

Two people read a team section and they want opposite things from it. A candidate is deciding whether they would fit, so they read the faces. A prospect is checking whether the company is real, so they count them. Both are done in about four seconds, which is why this section keeps turning up on about pages, careers pages, and the trust block near the bottom of a pricing page.

Pick a layout you can still update in a year

The maintenance cost of a team section is fixed the day you choose the layout. The simple member block is 384 by 144 on desktop, a name, a role, and little else, and adding a person to a list of those takes a minute.

The image card and glass layouts pin a portrait to every person at 296 by 460 or 360 by 480, so each new hire now needs a photo cropped and lit like the eleven around it. The collage layouts go further again, 2,392px of desktop height with portraits at several sizes, which looks superb on launch day and turns into a small project every time somebody leaves.

Choose the level of upkeep you will actually do. A tidy list of names beats a photo grid with three grey silhouettes in it.

Real faces get looked at, stock photos do not

NN/g's eyetracking work on photos as web content found that people give genuine attention to portraits of actual employees and skip decorative stock imagery completely, which is the entire argument for this section existing. While the real headshots are being organised, the kit's free placeholder avatars keep the layout honest about how it will look with faces in it.

Two things to settle before handoff. Crop every portrait to the same framing, because mismatched head sizes read as sloppiness across a row. And decide whether each photo is informative or decorative: when the name and role already sit beside it in text, alt text that repeats them just makes a screen reader say everything twice, and the W3C's tutorial on informative images is the reference for telling the two apart.

The grid, then the column

On desktop the members run across the 1,216px content area. On mobile they become one column, and the height difference is the part that catches people out.

Simple 01 is 800px tall on desktop and 1,894px on mobile, the same content costing more than twice the scroll. The image card version stretches from 1,352px to 4,530px. That is what a photo grid does on a 375px screen, and it means a team section belongs near the top of a mobile page or behind a link, rather than buried under three other sections where nobody reaches it.

The member blocks themselves shrink sensibly, with the left aligned block going from 384px to 304px wide and the portrait card trading width for height, from 296 by 460 to 343 by 507.

What sits either side of it

Every layout in this set also appears inside the team page examples, almost always directly above a careers section, which tells you what the section is mostly used for. The whole file is drawn twice, light and dark, and everything is built from one member block, so restyling that block restyles every layout at once. If the block links out to each person, the social icons set covers the platforms. If your team is too large or too fluid to show in full, the honest version is leadership here and headcount stated in an about page metric instead.

Once the layout is settled, the same sections exist in code. Untitled UI React team sections are open source, built with Tailwind CSS and React Aria, with the responsive grid and image handling already done.