TeamGrid UI Elements

<!-- blurr-lint-disable A2 -->
---
// TeamGrid, recovered from blurr-components.pages.dev
---

<section class="tg tg--style-card" data-component="team-grid"> <div class="tg__inner"> <div class="tg__header"> <p class="tg__eyebrow">Het team</p> <h2 class="tg__title">De mensen achter <em>BLURR</em></h2> <p class="tg__sub">Specialist voor specialist. Geen generalistisch bureau, wel een gedreven team.</p> </div> <div class="tg__grid" style="--cols: 3"> <div class="tg__member"> <div class="tg__photo-wrap"> <img data-allow-img src="/img/ext/photo-1507003211169-0a1dd7228f2d-w600-8954f7.jpg" alt="Mark Visscher" class="tg__photo" loading="lazy" decoding="async" > </div> <div class="tg__info"> <h3 class="tg__name">Mark Visscher</h3> <p class="tg__role">Founder &amp; Google Ads Specialist</p> <p class="tg__bio">10 jaar ervaring in performance marketing. Heeft meer dan €50M aan ad spend beheerd.</p> <div class="tg__socials"> <a href="#" class="tg__social" target="_blank" rel="noopener" aria-label="LinkedIn"> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 23.227 23 22.222 0h.003z"></path> </svg> </a>   </div> </div> </div><div class="tg__member"> <div class="tg__photo-wrap"> <img data-allow-img src="/img/ext/photo-1438761681033-6461ffad8d80-w600-831806.jpg" alt="Lisa Hoekstra" class="tg__photo" loading="lazy" decoding="async" > </div> <div class="tg__info"> <h3 class="tg__name">Lisa Hoekstra</h3> <p class="tg__role">Creative Director</p> <p class="tg__bio">Expert in social media advertising en brand storytelling. Works across Meta, TikTok en Pinterest.</p> <div class="tg__socials"> <a href="#" class="tg__social" target="_blank" rel="noopener" aria-label="LinkedIn"> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 23.227 23 22.222 0h.003z"></path> </svg> </a> <a href="#" class="tg__social" target="_blank" rel="noopener" aria-label="Twitter/X"> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"> <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.633 5.905-5.633zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path> </svg> </a>  </div> </div> </div><div class="tg__member"> <div class="tg__photo-wrap"> <img data-allow-img src="/img/ext/photo-1500648767791-00dcc994a43e-w600-095b3d.jpg" alt="Pieter Janssen" class="tg__photo" loading="lazy" decoding="async" > </div> <div class="tg__info"> <h3 class="tg__name">Pieter Janssen</h3> <p class="tg__role">SEO Lead</p> <p class="tg__bio">Brengt technische SEO en content strategie samen voor organische groei.</p> <div class="tg__socials"> <a href="#" class="tg__social" target="_blank" rel="noopener" aria-label="LinkedIn"> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 23.227 23 22.222 0h.003z"></path> </svg> </a>   </div> </div> </div> </div> </div> </section>

<style>
.tg{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.tg__inner{max-width:1200px;margin:0 auto}
.tg__header{text-align:center;margin-bottom:3.5rem;max-width:640px;margin-left:auto;margin-right:auto}
.tg__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.tg__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.tg__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.tg__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.6}
.tg__grid{display:grid;grid-template-columns:repeat(var(--cols, 3),1fr);gap:2rem}
.tg--style-card .tg__member{border:1px solid rgba(0,0,0,.07);border-radius:calc(var(--radius, .5rem) * 1.5);overflow:hidden;transition:box-shadow .2s}
.tg--style-card .tg__member:hover{box-shadow:0 8px 28px #00000014}
.tg--style-card .tg__info{padding:1.25rem}
.tg--style-photo .tg__member{text-align:center}
.tg--style-photo .tg__info{padding-top:1rem}
.tg__photo-wrap{aspect-ratio:3/4;overflow:hidden;background:#f5f5f7}
.tg--style-card .tg__photo-wrap{aspect-ratio:4/3}
.tg--style-photo .tg__photo-wrap{border-radius:calc(var(--radius, .5rem) * 2);aspect-ratio:1}
.tg__photo{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s ease}
.tg__member:hover .tg__photo{transform:scale(1.03)}
.tg__photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f0f3}
.tg--style-minimal .tg__photo-wrap{width:64px;height:64px;border-radius:50%;flex-shrink:0;aspect-ratio:unset}
.tg--style-minimal .tg__member{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;border-bottom:1px solid rgba(0,0,0,.07)}
.tg__name{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:.25rem}
.tg__role{font-size:.875rem;color:var(--color-accent, #6366f1);font-weight:500;margin-bottom:.5rem}
.tg__bio{font-size:.875rem;line-height:1.6;color:var(--color-muted, #6b7280);margin-bottom:.875rem}
.tg__socials{display:flex;gap:.5rem}
.tg__social{width:30px;height:30px;background:#0000000d;border-radius:var(--radius, .5rem);display:flex;align-items:center;justify-content:center;color:var(--color-muted, #6b7280);text-decoration:none;transition:background .15s,color .15s}
.tg__social:hover{background:var(--color-accent, #6366f1);color:#fff}
.tg__grid{grid-template-columns:repeat(2,1fr)}
.tg__grid{grid-template-columns:1fr}
</style>