team cards overlay hover portrait social team cards overlay hover portrait about people team cards with hover overlay portrait team grid with bio
Team Cards
Fetch pattern JSON:
curl https://webspire.de/patterns/team/card.json card.html
<section class="ws-team bg-[var(--ws-team-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-primary)]">Our team</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-team-text)] sm:text-4xl">The humans behind the code</h2>
</div>
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="group relative overflow-hidden rounded-2xl">
<div class="aspect-[3/4] bg-gradient-to-br from-indigo-200 to-purple-300"></div>
<div class="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-slate-900/90 via-slate-900/70 to-transparent p-6 pt-16 transition duration-300 group-hover:translate-y-0">
<h3 class="text-lg font-semibold text-white">Anna Weber</h3>
<p class="text-sm text-slate-300">Founder & CEO</p>
<p class="mt-2 text-sm text-slate-400">Turning ideas into products people love. 10+ years in design systems and developer tools.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6 transition duration-300 group-hover:opacity-0">
<h3 class="text-lg font-semibold text-white">Anna Weber</h3>
<p class="text-sm text-slate-300">Founder & CEO</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl">
<div class="aspect-[3/4] bg-gradient-to-br from-emerald-200 to-teal-300"></div>
<div class="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-slate-900/90 via-slate-900/70 to-transparent p-6 pt-16 transition duration-300 group-hover:translate-y-0">
<h3 class="text-lg font-semibold text-white">Marcus Kim</h3>
<p class="text-sm text-slate-300">Lead Engineer</p>
<p class="mt-2 text-sm text-slate-400">Building performant web experiences with modern tooling and zero-runtime CSS.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6 transition duration-300 group-hover:opacity-0">
<h3 class="text-lg font-semibold text-white">Marcus Kim</h3>
<p class="text-sm text-slate-300">Lead Engineer</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl">
<div class="aspect-[3/4] bg-gradient-to-br from-amber-200 to-orange-300"></div>
<div class="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-slate-900/90 via-slate-900/70 to-transparent p-6 pt-16 transition duration-300 group-hover:translate-y-0">
<h3 class="text-lg font-semibold text-white">Lisa Müller</h3>
<p class="text-sm text-slate-300">Design Lead</p>
<p class="mt-2 text-sm text-slate-400">Creating visual systems that scale. From tokens to full page compositions.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="Dribbble">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.168 10.168 0 004.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.127 10.127 0 006.18 2.108c1.49 0 2.913-.31 4.2-.87l-.084-.088z"/></svg>
</a>
<a href="#" class="text-slate-400 transition hover:text-white" aria-label="LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6 transition duration-300 group-hover:opacity-0">
<h3 class="text-lg font-semibold text-white">Lisa Müller</h3>
<p class="text-sm text-slate-300">Design Lead</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
teamcardsoverlayhoverportraitsocial
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| members | Yes | Team member cards with portrait, name, role, bio, social links. |
Three-column team grid with tall portrait cards. On hover, an overlay slides up revealing bio text and social links. Name and role visible by default at the bottom. Pure CSS transitions, no JavaScript. Responsive: 3 → 2 → 1 columns.