team bio social about people cards team bio social about people avatar links team grid with bios and social links about page team section with descriptions
Team With Bio
Fetch pattern JSON:
curl https://webspire.de/patterns/team/with-bio.json with-bio.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 people behind the product</h2>
</div>
<div class="mt-12 grid gap-8 sm:grid-cols-2">
<div class="flex gap-5">
<div class="h-20 w-20 shrink-0 rounded-2xl bg-gradient-to-br from-indigo-200 to-purple-300"></div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-team-text)]">Anna Weber</h3>
<p class="text-sm text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Founder & CEO</p>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-70">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-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="Twitter">
<svg class="h-4 w-4" 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-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="LinkedIn">
<svg class="h-4 w-4" 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>
<div class="flex gap-5">
<div class="h-20 w-20 shrink-0 rounded-2xl bg-gradient-to-br from-emerald-200 to-teal-300"></div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-team-text)]">Marcus Kim</h3>
<p class="text-sm text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Lead Engineer</p>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-70">Building performant web experiences with modern tooling and zero-runtime CSS.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="GitHub">
<svg class="h-4 w-4" 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-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="Twitter">
<svg class="h-4 w-4" 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>
<div class="flex gap-5">
<div class="h-20 w-20 shrink-0 rounded-2xl bg-gradient-to-br from-amber-200 to-orange-300"></div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-team-text)]">Lisa Muller</h3>
<p class="text-sm text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Design Lead</p>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-70">Creating visual systems that scale. From tokens to full page compositions.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="Dribbble">
<svg class="h-4 w-4" 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-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="LinkedIn">
<svg class="h-4 w-4" 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>
<div class="flex gap-5">
<div class="h-20 w-20 shrink-0 rounded-2xl bg-gradient-to-br from-rose-200 to-pink-300"></div>
<div>
<h3 class="text-base font-semibold text-[var(--ws-team-text)]">David Chen</h3>
<p class="text-sm text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Product Manager</p>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-70">Bridging the gap between user needs and technical solutions with data-driven decisions.</p>
<div class="mt-3 flex gap-3">
<a href="#" class="text-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="Twitter">
<svg class="h-4 w-4" 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-[var(--ws-team-text)] opacity-40 transition hover:opacity-80" aria-label="LinkedIn">
<svg class="h-4 w-4" 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>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
teambiosocialaboutpeoplecards
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| members | Yes | Team member entries with avatar, name, role, bio, and social links. |
Two-column team grid. Each member card shows a large avatar placeholder, name, role, two-line bio, and social icon links (Twitter, LinkedIn, GitHub, Dribbble). Responsive: 2 columns on desktop, single column on mobile.