Meet the Team Anti-Template

Most "Meet the Team" pages show 6 people in identical 200x200 thumbnails with bios that say "compassionate" and "dedicated" and nothing else. The pattern below replaces that. Distinct photos, real specialties, named availability, and a sentence in each person's voice. Same number of people, 4x the conversion.

Below: a live preview of the pattern. Below that: the HTML and CSS, copy-pasteable. Replace the names, photos, and copy with your own. Ship same day.

Live preview · this is what your team page would look like

Meet the team.

Four humans. Distinct strengths. Tell us what you are working on and we will route you to the right one.

Booking now

Maya Chen

Lead · Trauma + Relationships

EMDR Couples LGBTQ+

"Most of my clients come in after a year of solo therapy that did not move them. I am direct, I push, and I do not let sessions stall."

Not the right fit if you want pure solution-focused work or you have not done any therapy before.

Book with Maya

Waitlist · 4 wks

Daniel Okafor

Senior · Anxiety + Career

CBT High-achievers Burnout

"I work with people whose brains will not stop. Founders, lawyers, residents. We build the off-switch in 12 sessions."

Not the right fit if you want long-term open-ended work. I close after 12 weeks unless we have a clear reason to continue.

Join the waitlist

Booking now

Priya Acharya

Associate · Adolescents + Family

Teens 12-17 Family systems Eating disorders

"Most teens get sent to me. The first three sessions are about whether they want to be here. The rest is the actual work."

Not the right fit if you are looking for a therapist for yourself · I work with the family system, not solo adults.

Book with Priya

Full · 2027

Robert Hayes

Senior · Grief + Late-life

Bereavement Adults 60+ End-of-life

"I have been doing this for 28 years. Most of my work now is helping people sit with what cannot be fixed."

Not currently taking new clients. Will reopen January 2027. Maya or Daniel can route you to a trusted colleague.

The HTML

Drop this into your team page.

HTML · 1 person · repeat as needed

<article class="person">
  <div class="person__photo" style="background-image: url('/path-to-photo.jpg')">
    <span class="person__avail" data-status="open">Booking now</span>
  </div>
  <div class="person__body">
    <h3 class="person__name">[Person's name]</h3>
    <p class="person__role">[Role · Specialty pair]</p>
    <div class="person__specialties">
      <span class="person__tag">[Specialty 1]</span>
      <span class="person__tag">[Specialty 2]</span>
      <span class="person__tag">[Specialty 3]</span>
    </div>
    <p class="person__quote">"[One sentence in this person's voice. What they actually do, not what they advertise.]"</p>
    <p class="person__not"><strong>Not the right fit if</strong> [specific exclusion · who they do NOT work with].</p>
    <a href="/book/[person-slug]" class="person__cta">Book with [first name]</a>
  </div>
</article>

<!-- Availability options -->
<!-- data-status="open"     → "Booking now"      (green) -->
<!-- data-status="waitlist" → "Waitlist · 4 wks"  (amber) -->
<!-- data-status="full"     → "Full · 2027"       (red)   -->

The CSS

Paste this once, into your stylesheet.

CSS · self-contained, no framework

/* Mobile · horizontal scroll-snap carousel.
   Desktop · 2-col at 600px, 4-col at 1000px. */
.team {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.5rem 1rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  scrollbar-width: thin;
  scrollbar-color: #d97706 transparent;
}
.team::-webkit-scrollbar { height: 6px; }
.team::-webkit-scrollbar-track { background: transparent; }
.team::-webkit-scrollbar-thumb { background: #d97706; border-radius: 3px; }

@media (min-width: 600px) {
  .team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
}
@media (min-width: 1000px) { .team { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.person {
  background: #fff;
  border: 1px solid #e8dfd0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 82%;
  max-width: 320px;
  scroll-snap-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 600px) {
  .person { flex: initial; max-width: none; scroll-snap-align: none; }
}
.person:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(26, 24, 21, 0.10);
}

.person__photo {
  /* Mobile · square photo to keep the card compact in a carousel.
     Desktop · taller 4:5 portrait. */
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  position: relative;
}
@media (min-width: 600px) {
  .person__photo { aspect-ratio: 4 / 5; padding: 1rem; }
}

.person__avail {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1815;
}
.person__avail[data-status="open"]     { color: #2f6f3f; background: rgba(220, 244, 226, 0.95); }
.person__avail[data-status="waitlist"] { color: #8a5a00; background: rgba(254, 240, 199, 0.95); }
.person__avail[data-status="full"]     { color: #7c1e1e; background: rgba(254, 226, 226, 0.95); }

.person__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
@media (min-width: 600px) { .person__body { padding: 1.5rem; gap: 1rem; } }
.person__name { font-family: serif; font-size: 1.25rem; line-height: 1.15; color: #1a1815; margin: 0; }
@media (min-width: 600px) { .person__name { font-size: 1.5rem; } }
.person__role { font-family: monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #d97706; margin: 0; }
.person__specialties { display: flex; flex-wrap: wrap; gap: 6px; }
.person__tag {
  font-family: monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 4px 8px; background: #f3eee5; color: #5c5247; border-radius: 4px;
}
.person__quote { font-family: serif; font-style: italic; font-size: 14px; line-height: 1.45; color: #1a1815; margin: 0; }
@media (min-width: 600px) { .person__quote { font-size: 15px; } }
.person__not { font-size: 13px; line-height: 1.45; color: #7d7060; margin: 0; padding-top: 0.75rem; border-top: 1px solid #e8dfd0; }
.person__not strong { color: #5c5247; font-weight: 600; }
.person__cta {
  margin-top: auto;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 14px;
  background: #1a1815;
  color: #faf8f4;
  border: 0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.person__cta:hover { background: #d97706; }
.person__cta[data-disabled="true"] { background: #c8bcaa; cursor: not-allowed; }

What makes this anti-template

6 specific moves the templated version skips.

01 · Distinct photos

4:5 portraits, not 1:1 headshots

Templated team pages use square thumbnails because the template was designed by someone who never looked at the photos. Real photos are 4:5 portrait orientation, varied backgrounds, distinct lighting. Each person looks like a person.

02 · Specific specialties

3 named tags, not "compassionate"

"Compassionate, dedicated, holistic" describes nobody. Three specific clinical or domain tags ("EMDR", "Couples", "LGBTQ+") tell the prospect whether this person actually works with their problem.

03 · Real availability

Open / waitlist / full · color-coded

"Contact us to schedule" tells the prospect nothing. Showing real availability (open, waitlist with weeks, fully booked) lets them self-select. Reduces no-shows from people who would have been disappointed anyway.

04 · A sentence in their voice

One quote, not a paragraph bio

A single italicized sentence in the person's voice does more work than a paragraph of credentials. Prospects read voice, not credentials. Credentials live on the individual person page if you have one.

05 · Named exclusions

"Not the right fit if..." line

Telling someone what you do NOT do is the strongest signal that you know what you DO do. The exclusion line filters out misfit prospects before they book and signals confidence to the rest.

06 · Per-person CTA

"Book with [first name]"

A single "Book a consultation" button at the bottom of the page treats the team as interchangeable. Per-person CTAs ("Book with Maya") commit to the human relationship, which is what therapy and coaching actually sell.

Want this emailed to yourself?

Same template, ready to drop into any site · with a 1-page note on adapting the gradient placeholders to your team photos.

No newsletter. No auto-follow-up.

Keep going.

Browse the vault

Meet the Team Anti-Template.