Components

Team

The crew section — a banner photo plus a badge list, with an optional photographed profile variant for a fuller team page.

Markup

<section class="team on-dark" id="crew">
  <p class="lede">Every tech is badged, named, and texted to your phone before the knock.</p>
  <div class="photo rv"><img src="img/crew.jpg" width="1584" height="672" loading="lazy" alt="…"></div>
  <ul class="crew">
    <li class="rv"><h3>June Prosser</h3><span class="badge">BADGE 02 &middot; OWNER &middot; MASTER PLUMBER</span></li>
  </ul>
</section>

Badge list

.crew is a four-column grid of bordered list items, each a name plus a small mono “badge” caption line. It collapses to two columns, then one, at narrower widths (see Responsive).

Photographed profiles

Add .profiles alongside .crew to give each list item its own portrait photo above the name — used on the About page's fuller team section for the four badge-photographed leads, ahead of a second, unphotographed .crew.roster list for the rest of the crew (see Manifesto → Crew roster reprise).

<ul class="crew profiles">
  <li class="rv">
    <div class="portrait"><span class="stamp">BADGE 02</span><img src="img/crew.jpg" width="1584" height="672" loading="lazy" alt="…"></div>
    <h3>June Prosser</h3>
    <span class="badge">BADGE 02 &middot; OWNER &middot; MASTER PLUMBER</span>
  </li>
</ul>