team department grouped organization about people team department grouped engineering design organization team grouped by department organized team section with groups
Team Department
Fetch pattern JSON:
curl https://webspire.de/patterns/team/department.json department.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">Organized by expertise</h2>
</div>
<div class="mt-12 space-y-12">
<div>
<h3 class="text-lg font-semibold text-[var(--ws-team-text)]">Engineering</h3>
<div class="mt-4 divide-y divide-[var(--ws-team-border, rgba(0,0,0,0.08))]">
<div class="flex items-center gap-4 py-4">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-indigo-200 to-purple-300"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-team-text)]">Marcus Kim</p>
<p class="text-xs text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Lead Engineer</p>
</div>
</div>
<div class="flex items-center gap-4 py-4">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-emerald-200 to-teal-300"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-team-text)]">Raj Patel</p>
<p class="text-xs text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Senior Frontend Developer</p>
</div>
</div>
<div class="flex items-center gap-4 py-4">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-sky-200 to-blue-300"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-team-text)]">Elena Novak</p>
<p class="text-xs text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Backend Engineer</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-[var(--ws-team-text)]">Design</h3>
<div class="mt-4 divide-y divide-[var(--ws-team-border, rgba(0,0,0,0.08))]">
<div class="flex items-center gap-4 py-4">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-amber-200 to-orange-300"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-team-text)]">Lisa Muller</p>
<p class="text-xs text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Design Lead</p>
</div>
</div>
<div class="flex items-center gap-4 py-4">
<div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-rose-200 to-pink-300"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-team-text)]">Sophie Laurent</p>
<p class="text-xs text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">UX Designer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
teamdepartmentgroupedorganizationaboutpeople
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| departments | Yes | Department groups with header and compact member rows. |
Team members grouped by department. Two sections (Engineering with 3 members, Design with 2 members), each with a section header. Members shown in compact rows: small avatar, name, and role. Dividers between members.