FeaturedNew
TeamTeam Grid Cards
A responsive card grid of people with gradient-initials avatars, names and roles.
#team#grid#cards
3 frameworksBeginner
Loading…
People grouped by department into reflowing columns, each under its own heading.
<section class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
<h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">By team</h2>
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<section>
<h3 class="border-b border-gray-200 pb-2 text-xs font-bold uppercase tracking-widest text-blue-700 dark:border-gray-800 dark:text-blue-400">Engineering</h3>
<ul class="mt-4 space-y-4">
<li class="flex items-center gap-3">
<span aria-hidden="true" class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-xs font-semibold text-white">TA</span>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Tom Ashcroft</p>
<p class="truncate text-xs text-gray-600 dark:text-gray-400">Head of engineering</p>
</div>
</li>
</ul>
</section>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'By team' | Heading text for the card. |
departmentsrequired | Department[] | - | Departments |
className | string | - | Additional classes merged onto the root element. |
Pass `departments` of `{ name, members }`; each becomes a labelled column and the columns reflow 1 → 2 → 3. Rows use `min-w-0` and `truncate` so long names never overflow a narrow column.