Team cards

"Ask for Maria" staff cards: portrait under one shared brand tint (so mismatched phone photos read as a set), role, a one-line quote from a real review, and Book with Maria.

The chairs

Ask for Maria
Owner · colour correction, gray blending

“Maria blended my gray instead of covering it.”Ruth L., Google
Book with Maria
Ask for Dre
Fades, beard work, kids cuts

“Dre is the only one I let near my son’s hair.”Tasha M., Google
Book with Dre
Ask for Lou
Dry cuts, long hair

“Lou took his time and it shows.”Ben A., Google
Book with Lou

Three unrelated Pexels portraits (different light, different colour casts) read as one set under the shared tint. Names and quotes are sample data.

How to use it

Size

1.1 KB gzipped own code (JS 0.0 KB + CSS 1.1 KB; 2.3 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Showcase

Best for

Salons, barbers, med spa, tattoo, physio and chiro, small trades crews with named techs

What it does

Pure CSS. Portraits go grayscale + a multiply layer in the accent colour at 42%; on desktop hover or keyboard focus the real photo fades back. On phones the cards are a swipe row (78% wide, next one peeks); from 760 px a grid. --fp sets each face's focal point.

When to use

Reviews name staff ("ask for Dre"): Mobbin upgrade #8.

Owner-operators: one card can become the About section.

The "face on every site" rule: a real staff face beats an empty room.

Don't

Quotes that aren't in their reviews, or staff who have left.

Stock portraits presented as staff (never).

A different tint per person (the point is one shared treatment).

Reduced motion, no JS, accessibility

No JS needed.

Reduced motion: the tint swaps without a fade, no zoom.

Alt text names the person; quote source in <cite>; Book links are 44 px tall.

Notes

Tint strength: --tc-tint-amt (0.3-0.5). For dark brands set --tc-tint to the deep band colour instead.

Copy-ready snippet

<!-- Team cards (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/team-cards/module.css">

<!-- markup: -->
<section class="wbl-tc" aria-label="Our team">
  <ul class="wbl-tc-list">
    <li class="wbl-tc-card">
      <div class="wbl-tc-pic"><img src="../_demo/img/stylist-portrait-640.jpg" width="640" height="427" style="--fp:62% 30%" loading="lazy" decoding="async" alt="Maria at her chair"></div>
      <h3>Ask for Maria</h3><p class="wbl-tc-role">Owner · colour correction, gray blending</p>
      <blockquote>“Maria blended my gray instead of covering it.”<cite>Ruth L., Google</cite></blockquote>
      <a class="wbl-tc-book" href="#book?staff=maria">Book with Maria</a>
    </li>
    <li class="wbl-tc-card">
      <div class="wbl-tc-pic"><img src="../_demo/img/barber-1-640.jpg" width="640" height="427" style="--fp:60% 25%" loading="lazy" decoding="async" alt="Dre in the shop"></div>
      <h3>Ask for Dre</h3><p class="wbl-tc-role">Fades, beard work, kids cuts</p>
      <blockquote>“Dre is the only one I let near my son’s hair.”<cite>Tasha M., Google</cite></blockquote>
      <a class="wbl-tc-book" href="#book?staff=dre">Book with Dre</a>
    </li>
    <li class="wbl-tc-card">
      <div class="wbl-tc-pic"><img src="../_demo/img/barber-2-640.jpg" width="640" height="427" style="--fp:45% 30%" loading="lazy" decoding="async" alt="Lou at the front desk"></div>
      <h3>Ask for Lou</h3><p class="wbl-tc-role">Dry cuts, long hair</p>
      <blockquote>“Lou took his time and it shows.”<cite>Ben A., Google</cite></blockquote>
      <a class="wbl-tc-book" href="#book?staff=lou">Book with Lou</a>
    </li>
  </ul>
</section>