A team page puts names, faces and roles on your business so visitors know who they will deal with. The layouts below range from a simple photo grid to grouped departments and a single founder story. Each is original, editable HTML and CSS, and the grid builder sets columns, photo shape and spacing for you.
| Team size | Layout that works | Show per person |
|---|---|---|
| 1 to 2 | Founder story with one large photo | Name, role, a few sentences, a contact link |
| 3 to 8 | Card grid with short bios | Photo, name, role, one line about them |
| 9 to 30 | Compact photo grid, grouped by team | Photo, name, role |
| 30 and more | Leadership up top, then a searchable list | Name, role, team; photos optional |
Updated
People buy from people, especially for services such as clinics, agencies, trades and restaurants. A team page answers who is behind the business and makes the first email or visit feel less like a leap. The examples here are drawn with initials instead of photos, so you can drop in your own pictures without layout changes.
Pick the columns, photo shape and gap. Starting CSS:
.team {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.team img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}
@media (max-width: 600px) {
.team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Coloured initials stand in for photos. Replace each .av block with an img that uses the same class.
Round photos, name and role centred. It works for almost any team of four to twelve.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; text-align: center }
.av { border-radius: 50%; font-size: 24px }
p { margin: 6px 0 0; font-size: 14px } span { color: #6b7280; font-size: 13px }
</style>
<div class="tm g"><div><div class="av" style="background:#0f766e">AR</div><p>Ana Ruiz</p><span>Physiotherapist</span></div>
<div><div class="av" style="background:#7c3aed">JO</div><p>James Osei</p><span>Sports therapist</span></div>
<div><div class="av" style="background:#b45309">LK</div><p>Lena Kim</p><span>Front desk</span></div></div>A short line on what each person does for customers turns a headshot wall into something useful.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }
.c { padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px }
.av { width: 56px; border-radius: 12px; font-size: 18px }
h3 { margin: 8px 0 0; font-size: 16px } small { color: #6b7280 } p { margin: 6px 0 0; font-size: 14px; color: #374151 }
</style>
<div class="tm g"><div class="c"><div class="av" style="background:#1d4ed8">MB</div><h3>Marco Bell</h3><small>Lead electrician</small><p>Plans every rewire and signs off the safety checks.</p></div>
<div class="c"><div class="av" style="background:#be123c">SP</div><h3>Sara Patel</h3><small>Scheduling</small><p>Books your visit and texts the day before.</p></div></div>For a one or two person business, a single photo and a few honest sentences carry more weight than a grid.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.f { display: flex; flex-wrap: wrap; gap: 16px; align-items: center }
.av { width: 120px; border-radius: 16px; font-size: 32px; background: #9a3412 }
.f div:last-child { flex: 1 1 220px }
h2 { margin: 0 0 6px; font-size: 20px } p { margin: 0; color: #374151 }
</style>
<div class="tm f"><div class="av">NB</div><div><h2>Hi, I'm Noor</h2><p>I opened the shop in 2019 after ten years repairing bikes for other people. I still fit every wheel myself, and I answer the shop email.</p></div></div>Headings per team help visitors find the right person in a larger company.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
h3 { margin: 10px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280 }
.row { display: flex; flex-wrap: wrap; gap: 12px }
.row div { display: flex; align-items: center; gap: 8px; font-size: 14px }
.av { width: 36px; border-radius: 50%; font-size: 13px; background: #334155 }
</style>
<div class="tm"><h3>Design</h3><div class="row"><div><span class="av">TW</span>Tess Wu</div><div><span class="av">RG</span>Raj Gill</div></div>
<h3>Client care</h3><div class="row"><div><span class="av">EO</span>Ella Ortiz</div><div><span class="av">BN</span>Ben Nash</div><div><span class="av">KA</span>Kofi Adu</div></div></div>Larger cards for the people who make decisions, a compact strip for everyone else.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px }
.lead .av { border-radius: 14px; font-size: 26px; background: #0369a1 }
.lead p { margin: 6px 0 0; font-weight: 600 } .lead small { color: #6b7280 }
.rest { display: flex; flex-wrap: wrap; gap: 6px }
.rest .av { width: 34px; border-radius: 50%; font-size: 12px; background: #64748b }
</style>
<div class="tm"><div class="lead"><div><div class="av">HC</div><p>Hana Cole</p><small>Managing director</small></div><div><div class="av">DM</div><p>Dev Menon</p><small>Head of operations</small></div></div>
<div class="rest" aria-label="Rest of the team"><span class="av" title="Ivy Lo">IL</span><span class="av" title="Omar Saleh">OS</span><span class="av" title="Pia Berg">PB</span><span class="av" title="Gus Hale">GH</span></div></div>Rows with name, role and team are easy to scan and search with the browser's find.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
ul { list-style: none; margin: 0; padding: 0 }
li { display: grid; grid-template-columns: 32px 1fr; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid #e5e7eb; font-size: 14px }
.av { width: 32px; grid-row: span 2; border-radius: 50%; font-size: 12px; background: #475569 }
small { color: #6b7280 }
</style>
<ul class="tm"><li><span class="av">AL</span><strong>Amy Lund</strong><small>Accountant, Tax team</small></li>
<li><span class="av">FN</span><strong>Felix Ng</strong><small>Bookkeeper, Small business team</small></li>
<li><span class="av">CR</span><strong>Cleo Reyes</strong><small>Payroll specialist, Payroll team</small></li></ul>Each person gets a mail link, so customers reach the right desk first time.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px }
.c { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #f8fafc }
.av { width: 48px; border-radius: 50%; font-size: 15px; background: #15803d }
a { display: block; font-size: 13px; color: #1d4ed8 }
</style>
<div class="tm g"><div class="c"><span class="av">GH</span><div><strong>Gita Hall</strong><a href="mailto:[email protected]">[email protected]</a></div></div>
<div class="c"><span class="av">TB</span><div><strong>Tom Brook</strong><a href="mailto:[email protected]">[email protected]</a></div></div></div>When people prefer not to have individual headshots, one shared picture and a caption still put names to the business.
<style>
.tm { font-family: system-ui, sans-serif; color: #111827 }
.av { display: grid; place-items: center; aspect-ratio: 1; font-weight: 700; color: #fff }
.ph { height: 140px; border-radius: 14px; background: linear-gradient(135deg, #fde68a, #fca5a5) }
figcaption { margin-top: 8px; font-size: 14px; color: #374151 }
</style>
<figure class="tm" style="margin:0"><div class="ph" role="img" aria-label="The kitchen team outside the restaurant"></div>
<figcaption>From left: Rosa (head chef), Kai (pastry), Mo (line cook) and Ines (front of house).</figcaption></figure>Photos arrive in every size. Setting aspect-ratio on the image box and object-fit: cover on the img element gives each face the same frame. Add object-position if heads are being cut off at the top.
A grid with repeat(auto-fill, minmax(160px, 1fr)) adapts from phone to desktop without breakpoints. Use the builder below for a fixed column count instead, and add a media query for small screens.
One or two sentences per person is enough: what they help customers with, and one human detail. Long CV style bios get skipped. If a role needs more depth, link to a dedicated profile page.
At minimum each person's name, role and a photo. Add a sentence on what they do for customers, and a contact link where it helps. A short introduction at the top explains how the team works together.
Name the person, and add the role if it is not written next to the photo, for example alt="Ana Ruiz, physiotherapist". If the name is already in a caption right beside the image, a short alt or the name alone avoids repeating long text.
Give the image a fixed aspect ratio with aspect-ratio and use object-fit: cover. The picture fills its box and any extra is cropped instead of the face being squashed.
Small businesses often fit the team onto the about page. Once you have more than about eight people, or teams customers contact directly, a separate page keeps the about page focused on your story.
Yes. Initials, illustrations or a single group photo work when people prefer not to be pictured. Keep names and roles visible so the page still does its job.
Related: About us page examples, How to create an about page, Careers page examples, CSS grid generator, Contact us page examples.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.