Exclusivo

Team `.mv-team`

Sección de equipo en el registro editorial de los demás bloques (etiquetas mono, reglas finas, entradas numeradas): un listado con reglas de miembros con foto o iniciales, rol, ubicación e iconos sociales, tarjetas grandes de liderazgo con una breve biografía, o una lista densa agrupada por equipo; una tarjeta de contratación opcional se inserta en cualquier lista.

Categoría	Bloques
Tipo	Bloque (sección lista para usar) (`.mv-team`)
Estado	estable
También instala	avatar
Keywords	exclusive, team, people, about, leadership, founders, staff, roster, careers, hiring, landing, editorial

When to use

An About or company page needs a grid of team members with photos, roles, locations and social links
Founders or executives should get larger cards with a short bio each
A large organization wants its whole roster as dense rows grouped by team or department
A careers teaser should sit inside the team grid as a We're hiring tile

Avoid when

The people are customers vouching for the product with quotes, not staff → use Testimonials instead
Only one person's identity is shown, such as an author byline or an account menu → use Avatar instead
The section lists partner or customer companies rather than people → use Logo Cloud instead

Instalación

node scripts/add.mjs team --out ./src/marvelous

Agente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["team"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Archivos copiados (dependencias incluidas): tokens/tokens.css, core/base.css, components/avatar/avatar.css, components/avatar/avatar.js, components/team/team.css.

Uso

Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables CSS:

<mv-tabs id="team-demo" value="grid" data-size="sm" style="gap:0;background:var(--mv-bg)">
  <style>#team-demo > [role="tablist"] { justify-self: center; margin: .75rem auto 0; }</style>
  <div role="tablist" aria-label="Block variant">
    <button role="tab" data-value="grid">Grid</button>
    <button role="tab" data-value="leadership">Leadership</button>
    <button role="tab" data-value="compact">Compact</button>
  </div>

  <!-- Grid (default): ruled ledger of members with a hiring tile -->
  <div role="tabpanel" data-value="grid">
    <section class="mv-team" aria-labelledby="tm-grid-title">
      <div class="mv-team-inner">
        <header class="mv-team-header">
          <p class="mv-team-eyebrow">The team <span class="mv-team-count">19 people · 17 countries</span></p>
          <h2 class="mv-team-title" id="tm-grid-title">The people building Fernway</h2>
          <p class="mv-team-lead">A remote-first team spread across 17 countries and 11 time zones. Meet a few of the people who ship the product and answer your tickets.</p>
        </header>
        <ul class="mv-team-list">
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='24.5' r='15.5' fill='%231b1410'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%237a4a2f'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%237a4a2f'/%3E%3Cpath d='M21.5 24.5c0-6.5 4.5-10.5 10.5-10.5s10.5 4 10.5 10.5c-2.5-2.5-6-3.5-10.5-3.5s-8 1-10.5 3.5z' fill='%231b1410'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">AO</span></span>
            <h3 class="mv-team-name">Amara Okafor</h3>
            <p class="mv-team-role">Co-founder &amp; CEO</p>
            <p class="mv-team-location">Lagos, NG</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Amara Okafor on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Amara Okafor on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23d9a37e'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23d9a37e'/%3E%3Cpath d='M22.6 30.5c1 5.2 4.6 8.3 9.4 8.3s8.4-3.1 9.4-8.3c-1.4 1.6-3.2 2.1-4.6 2.1-1.6 0-2.8-1.2-4.8-1.2s-3.2 1.2-4.8 1.2c-1.4 0-3.2-.5-4.6-2.1z' fill='%232b1d14'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%232b1d14'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">MF</span></span>
            <h3 class="mv-team-name">Mateo Fernández</h3>
            <p class="mv-team-role">Co-founder &amp; CTO</p>
            <p class="mv-team-location">Buenos Aires, AR</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Mateo Fernández on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Mateo Fernández on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fecdd3'/%3E%3Cstop offset='1' stop-color='%23e11d48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M18.5 29c0-9.5 5.5-15.5 13.5-15.5S45.5 19.5 45.5 29v8h-27z' fill='%23111827'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23fafaf9'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1cfb0'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1cfb0'/%3E%3Cpath d='M20.5 27c0-8 5-13.5 11.5-13.5S43.5 19 43.5 27c-3-2.5-7-4-11.5-4s-8.5 1.5-11.5 4z' fill='%23111827'/%3E%3Cg fill='none' stroke='%23111827' stroke-width='1.4'%3E%3Ccircle cx='27.5' cy='28' r='3.4'/%3E%3Ccircle cx='36.5' cy='28' r='3.4'/%3E%3Cpath d='M30.9 28h2.2'/%3E%3C/g%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">YT</span></span>
            <h3 class="mv-team-name">Yuki Tanaka</h3>
            <p class="mv-team-role">Head of Design</p>
            <p class="mv-team-location">Osaka, JP</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Yuki Tanaka on Dribbble"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9.2"/><path d="M4.6 6.6c4.2 3 9.6 3.8 15.6 2.2M8.3 3.6c3.4 4.1 5.9 10 6.9 16.8M2.9 13.6c5.6-2.1 11.2-1.1 16.4 4.6"/></svg></a></li><li><a href="#team-demo" aria-label="Yuki Tanaka on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='12.5' r='5.2' fill='%231c1917'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e1b4b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23a86f4c'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23a86f4c'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">PR</span></span>
            <h3 class="mv-team-name">Priya Raman</h3>
            <p class="mv-team-role">Staff Engineer</p>
            <p class="mv-team-location">Bengaluru, IN</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Priya Raman on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li><li><a href="#team-demo" aria-label="Priya Raman, personal website"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9.2"/><path d="M2.8 12h18.4M12 2.8c2.6 2.9 3.9 6 3.9 9.2s-1.3 6.3-3.9 9.2c-2.6-2.9-3.9-6-3.9-9.2s1.3-6.3 3.9-9.2z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square" data-variant="tinted" style="--mv-avatar-hue:230" aria-hidden="true"><span class="mv-avatar-fallback">JL</span></span>
            <h3 class="mv-team-name">Jonas Lindqvist</h3>
            <p class="mv-team-role">Product Manager</p>
            <p class="mv-team-location">Stockholm, SE</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Jonas Lindqvist on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2399f6e4'/%3E%3Cstop offset='1' stop-color='%230f766e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%233b2418'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f8fafc'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23c98f6a'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23c98f6a'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%233b2418'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">LH</span></span>
            <h3 class="mv-team-name">Leila Haddad</h3>
            <p class="mv-team-role">Customer Success Lead</p>
            <p class="mv-team-location">Montréal, CA</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Leila Haddad on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Leila Haddad on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square" data-variant="tinted" style="--mv-avatar-hue:150" aria-hidden="true"><span class="mv-avatar-fallback">TN</span></span>
            <h3 class="mv-team-name">Tomasz Nowak</h3>
            <p class="mv-team-role">Platform Engineer</p>
            <p class="mv-team-location">Kraków, PL</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Tomasz Nowak on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-hiring">
            <a class="mv-team-hiring-link" href="#team-demo">
              <span class="mv-team-hiring-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span>
              <span class="mv-team-hiring-title">We&#8217;re hiring</span>
              <span class="mv-team-hiring-text">6 open roles across engineering, design and sales. Fully remote, with a yearly offsite.</span>
              <span class="mv-team-hiring-cta">See open roles</span>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </div>

  <!-- Leadership: large portraits with a short bio -->
  <div role="tabpanel" data-value="leadership">
    <section class="mv-team" data-variant="leadership" aria-labelledby="tm-lead-title">
      <div class="mv-team-inner">
        <header class="mv-team-header">
          <p class="mv-team-eyebrow">Leadership <span class="mv-team-count">Since 2019</span></p>
          <h2 class="mv-team-title" id="tm-lead-title">The team steering Fernway</h2>
          <p class="mv-team-lead">Four operators who have built logistics software on three continents, and who still take support calls every Friday.</p>
        </header>
        <ul class="mv-team-list">
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='24.5' r='15.5' fill='%231b1410'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%237a4a2f'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%237a4a2f'/%3E%3Cpath d='M21.5 24.5c0-6.5 4.5-10.5 10.5-10.5s10.5 4 10.5 10.5c-2.5-2.5-6-3.5-10.5-3.5s-8 1-10.5 3.5z' fill='%231b1410'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">AO</span></span>
            <h3 class="mv-team-name">Amara Okafor</h3>
            <p class="mv-team-role">Co-founder &amp; Chief Executive Officer</p>
            <p class="mv-team-bio">Ran freight operations across West Africa for ten years before starting Fernway. Spends most weeks with customers and the rest rewriting the roadmap.</p>
            <p class="mv-team-location">Lagos, NG</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Amara Okafor on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Amara Okafor on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23d9a37e'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23d9a37e'/%3E%3Cpath d='M22.6 30.5c1 5.2 4.6 8.3 9.4 8.3s8.4-3.1 9.4-8.3c-1.4 1.6-3.2 2.1-4.6 2.1-1.6 0-2.8-1.2-4.8-1.2s-3.2 1.2-4.8 1.2c-1.4 0-3.2-.5-4.6-2.1z' fill='%232b1d14'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%232b1d14'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">MF</span></span>
            <h3 class="mv-team-name">Mateo Fernández</h3>
            <p class="mv-team-role">Co-founder &amp; Chief Technology Officer</p>
            <p class="mv-team-bio">Former platform lead at a national rail operator. Runs engineering and still reviews every schema migration before it ships.</p>
            <p class="mv-team-location">Buenos Aires, AR</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Mateo Fernández on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Mateo Fernández on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square" data-variant="tinted" style="--mv-avatar-hue:20" aria-hidden="true"><span class="mv-avatar-fallback">HW</span></span>
            <h3 class="mv-team-name">Hannah Weiss</h3>
            <p class="mv-team-role">Chief Operating Officer</p>
            <p class="mv-team-bio">Scaled operations at two marketplaces from Series A to IPO. Owns finance, people and the unglamorous work of running a remote company well.</p>
            <p class="mv-team-location">Berlin, DE</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Hannah Weiss on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li></ul>
          </li>
          <li class="mv-team-member">
            <span class="mv-avatar" data-shape="square"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d9f99d'/%3E%3Cstop offset='1' stop-color='%234d7c0f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f5f5f4'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%235c3a24'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%235c3a24'/%3E%3Cpath d='M22.6 30.5c1 5.2 4.6 8.3 9.4 8.3s8.4-3.1 9.4-8.3c-1.4 1.6-3.2 2.1-4.6 2.1-1.6 0-2.8-1.2-4.8-1.2s-3.2 1.2-4.8 1.2c-1.4 0-3.2-.5-4.6-2.1z' fill='%230c0a09'/%3E%3Cpath d='M21.5 24.5c0-6.5 4.5-10.5 10.5-10.5s10.5 4 10.5 10.5c-2.5-2.5-6-3.5-10.5-3.5s-8 1-10.5 3.5z' fill='%230c0a09'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">KM</span></span>
            <h3 class="mv-team-name">Kwame Mensah</h3>
            <p class="mv-team-role">Chief Revenue Officer</p>
            <p class="mv-team-bio">Built the first enterprise sales team at a European shipping platform. Believes every contract should start with a pilot that pays for itself.</p>
            <p class="mv-team-location">Accra, GH</p>
            <ul class="mv-team-socials"><li><a href="#team-demo" aria-label="Kwame Mensah on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li><li><a href="#team-demo" aria-label="Kwame Mensah on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li></ul>
          </li>
        </ul>
      </div>
    </section>
  </div>

  <!-- Compact: dense rows grouped by team -->
  <div role="tabpanel" data-value="compact">
    <section class="mv-team" data-variant="compact" aria-labelledby="tm-compact-title">
      <div class="mv-team-inner">
        <header class="mv-team-header">
          <p class="mv-team-eyebrow">Everyone <span class="mv-team-count">19 people · 4 teams</span></p>
          <h2 class="mv-team-title" id="tm-compact-title">Everyone at Fernway</h2>
          <p class="mv-team-lead">The whole roster, team by team. New people join most months, so say hello if you spot a new face.</p>
        </header>
        <div class="mv-team-groups">
          <section class="mv-team-group" aria-labelledby="tm-c-lead">
            <h3 class="mv-team-group-title" id="tm-c-lead">Leadership <span class="mv-team-group-count">4 people</span></h3>
            <ul class="mv-team-list">
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='24.5' r='15.5' fill='%231b1410'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%237a4a2f'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%237a4a2f'/%3E%3Cpath d='M21.5 24.5c0-6.5 4.5-10.5 10.5-10.5s10.5 4 10.5 10.5c-2.5-2.5-6-3.5-10.5-3.5s-8 1-10.5 3.5z' fill='%231b1410'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">AO</span></span>
                <p class="mv-team-name">Amara Okafor</p>
                <p class="mv-team-role">Chief Executive Officer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23d9a37e'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23d9a37e'/%3E%3Cpath d='M22.6 30.5c1 5.2 4.6 8.3 9.4 8.3s8.4-3.1 9.4-8.3c-1.4 1.6-3.2 2.1-4.6 2.1-1.6 0-2.8-1.2-4.8-1.2s-3.2 1.2-4.8 1.2c-1.4 0-3.2-.5-4.6-2.1z' fill='%232b1d14'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%232b1d14'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">MF</span></span>
                <p class="mv-team-name">Mateo Fernández</p>
                <p class="mv-team-role">Chief Technology Officer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:20" aria-hidden="true"><span class="mv-avatar-fallback">HW</span></span>
                <p class="mv-team-name">Hannah Weiss</p>
                <p class="mv-team-role">Chief Operating Officer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d9f99d'/%3E%3Cstop offset='1' stop-color='%234d7c0f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f5f5f4'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%235c3a24'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%235c3a24'/%3E%3Cpath d='M22.6 30.5c1 5.2 4.6 8.3 9.4 8.3s8.4-3.1 9.4-8.3c-1.4 1.6-3.2 2.1-4.6 2.1-1.6 0-2.8-1.2-4.8-1.2s-3.2 1.2-4.8 1.2c-1.4 0-3.2-.5-4.6-2.1z' fill='%230c0a09'/%3E%3Cpath d='M21.5 24.5c0-6.5 4.5-10.5 10.5-10.5s10.5 4 10.5 10.5c-2.5-2.5-6-3.5-10.5-3.5s-8 1-10.5 3.5z' fill='%230c0a09'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">KM</span></span>
                <p class="mv-team-name">Kwame Mensah</p>
                <p class="mv-team-role">Chief Revenue Officer</p>
              </li>
            </ul>
          </section>
          <section class="mv-team-group" aria-labelledby="tm-c-eng">
            <h3 class="mv-team-group-title" id="tm-c-eng">Engineering <span class="mv-team-group-count">6 people</span></h3>
            <ul class="mv-team-list">
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='12.5' r='5.2' fill='%231c1917'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e1b4b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23a86f4c'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23a86f4c'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">PR</span></span>
                <p class="mv-team-name">Priya Raman</p>
                <p class="mv-team-role">Staff Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:150" aria-hidden="true"><span class="mv-avatar-fallback">TN</span></span>
                <p class="mv-team-name">Tomasz Nowak</p>
                <p class="mv-team-role">Platform Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:200" aria-hidden="true"><span class="mv-avatar-fallback">CW</span></span>
                <p class="mv-team-name">Chen Wei</p>
                <p class="mv-team-role">Senior Backend Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:320" aria-hidden="true"><span class="mv-avatar-fallback">AN</span></span>
                <p class="mv-team-name">Aroha Ngata</p>
                <p class="mv-team-role">Mobile Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:45" aria-hidden="true"><span class="mv-avatar-fallback">DM</span></span>
                <p class="mv-team-name">Diego Morales</p>
                <p class="mv-team-role">Data Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:280" aria-hidden="true"><span class="mv-avatar-fallback">NP</span></span>
                <p class="mv-team-name">Nadia Petrova</p>
                <p class="mv-team-role">Site Reliability Engineer</p>
              </li>
              <li class="mv-team-hiring">
                <a class="mv-team-hiring-link" href="#team-demo">
                  <span class="mv-team-hiring-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span>
                  <span class="mv-team-hiring-title">Join Engineering</span>
                  <span class="mv-team-hiring-text">3 open roles</span>
                </a>
              </li>
            </ul>
          </section>
          <section class="mv-team-group" aria-labelledby="tm-c-prod">
            <h3 class="mv-team-group-title" id="tm-c-prod">Product &amp; Design <span class="mv-team-group-count">4 people</span></h3>
            <ul class="mv-team-list">
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:230" aria-hidden="true"><span class="mv-avatar-fallback">JL</span></span>
                <p class="mv-team-name">Jonas Lindqvist</p>
                <p class="mv-team-role">Product Manager</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fecdd3'/%3E%3Cstop offset='1' stop-color='%23e11d48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M18.5 29c0-9.5 5.5-15.5 13.5-15.5S45.5 19.5 45.5 29v8h-27z' fill='%23111827'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23fafaf9'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1cfb0'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1cfb0'/%3E%3Cpath d='M20.5 27c0-8 5-13.5 11.5-13.5S43.5 19 43.5 27c-3-2.5-7-4-11.5-4s-8.5 1.5-11.5 4z' fill='%23111827'/%3E%3Cg fill='none' stroke='%23111827' stroke-width='1.4'%3E%3Ccircle cx='27.5' cy='28' r='3.4'/%3E%3Ccircle cx='36.5' cy='28' r='3.4'/%3E%3Cpath d='M30.9 28h2.2'/%3E%3C/g%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">YT</span></span>
                <p class="mv-team-name">Yuki Tanaka</p>
                <p class="mv-team-role">Head of Design</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:350" aria-hidden="true"><span class="mv-avatar-fallback">SR</span></span>
                <p class="mv-team-name">Sofia Rossi</p>
                <p class="mv-team-role">Product Designer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:95" aria-hidden="true"><span class="mv-avatar-fallback">OA</span></span>
                <p class="mv-team-name">Oluwaseun Adeyemi</p>
                <p class="mv-team-role">Brand Designer</p>
              </li>
            </ul>
          </section>
          <section class="mv-team-group" aria-labelledby="tm-c-gtm">
            <h3 class="mv-team-group-title" id="tm-c-gtm">Customers &amp; Sales <span class="mv-team-group-count">5 people</span></h3>
            <ul class="mv-team-list">
              <li class="mv-team-member">
                <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2399f6e4'/%3E%3Cstop offset='1' stop-color='%230f766e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%233b2418'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f8fafc'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23c98f6a'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23c98f6a'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%233b2418'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">LH</span></span>
                <p class="mv-team-name">Leila Haddad</p>
                <p class="mv-team-role">Customer Success Lead</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:130" aria-hidden="true"><span class="mv-avatar-fallback">RO</span></span>
                <p class="mv-team-name">Rafael Oliveira</p>
                <p class="mv-team-role">Account Executive</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:260" aria-hidden="true"><span class="mv-avatar-fallback">HK</span></span>
                <p class="mv-team-name">Hana Kim</p>
                <p class="mv-team-role">Solutions Engineer</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:60" aria-hidden="true"><span class="mv-avatar-fallback">KB</span></span>
                <p class="mv-team-name">Karim Benali</p>
                <p class="mv-team-role">Support Specialist</p>
              </li>
              <li class="mv-team-member">
                <span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:185" aria-hidden="true"><span class="mv-avatar-fallback">IS</span></span>
                <p class="mv-team-name">Ingrid Solberg</p>
                <p class="mv-team-role">Marketing Lead</p>
              </li>
              <li class="mv-team-hiring">
                <a class="mv-team-hiring-link" href="#team-demo">
                  <span class="mv-team-hiring-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span>
                  <span class="mv-team-hiring-title">Join Sales</span>
                  <span class="mv-team-hiring-text">2 open roles</span>
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </section>
  </div>
</mv-tabs>

API

Attributes

Name	Tipo	Default	Description
`data-variant`	grid \| leadership \| compact	`grid`	On .mv-team. grid (default, or no attribute): ruled ledger, one row per member on narrow screens, then portrait cells in 2, 3 and --mv-team-columns (4) columns; leadership: one card per person with a large portrait, the bio beside it from 36rem, --mv-team-columns (2) columns from 56rem; compact: .mv-team-groups of dense rows (avatar, name, role), the group title in a side column from 48rem.

Content structure

Name	Description
`.mv-team-header`	p.mv-team-eyebrow (accent square, optional .mv-team-count), h2.mv-team-title, optional p.mv-team-lead (placed on the right from 48rem).
`ul.mv-team-list > li.mv-team-member`	.mv-avatar (leave out data-size so the block sizes it), .mv-team-name (h3, or p in the compact variant), p.mv-team-role, optional p.mv-team-bio (hidden in compact), p.mv-team-location (map pin added in CSS) and ul.mv-team-socials of icon links. Entries are numbered 01, 02… in CSS (grid and leadership).
`li.mv-team-hiring > a.mv-team-hiring-link`	Optional hiring tile, one link over the whole tile: span.mv-team-hiring-mark (icon), -title, -text, optional -cta (arrow added in CSS). Not numbered; tinted in the grid variant.
`.mv-team-groups > section.mv-team-group`	Compact variant: h3.mv-team-group-title (numbered in CSS, optional span.mv-team-group-count) + one ul.mv-team-list per team.

CSS classes

Name	Description
`mv-team`	Root section, mv-team query container.
`mv-team-inner`	Centered content column (max width, padding).

CSS variables

Name	Default	Description
`--mv-team-max`	`72rem`	Max width.
`--mv-team-bg`	`transparent`	Section background.
`--mv-team-rule`	`var(--mv-border)`	Color of the hairline rules.
`--mv-team-columns`	`4 (grid), 2 (leadership)`	Columns at the widest breakpoint (64rem for grid, 56rem for leadership).
`--mv-team-photo`	`3.5rem / 4rem (grid), 5.5rem to 8.5rem (leadership), 2.5rem (compact)`	Photo size, also used by the hiring mark.
`--mv-team-hiring-radius`	`24% of the photo (50% in compact)`	Corner radius of the hiring mark; match it to the avatar shape.

Accessibility

A labeled <section> (h2) with a semantic <ul> of members; in grid and leadership each name is an h3, in compact the team names are h3 inside labeled sections and the member names are plain text. Photos use an empty alt and initials-only avatars are aria-hidden because the name is written next to them. Each social icon link has its own name ("Amara Okafor on LinkedIn"). The hiring tile is a single link whose name is its visible text. Numbers, the map pin and the arrow are CSS-generated with empty alternative text. Focus is shown with an outline (kept in forced colors), hover effects stop with reduced motion.