FeaturedNew
TeamTeam Grid Cards
A responsive card grid of people with gradient-initials avatars, names and roles.
#team#grid#cards
3 frameworksBeginner
Loading…
A team card grid whose final tile is a dashed "join us" call to action.
<section class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
<h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Meet the team</h2>
<ul class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<li class="flex flex-col items-center rounded-2xl border border-gray-200 bg-white p-6 text-center dark:border-gray-800 dark:bg-gray-900">
<span aria-hidden="true" class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-lg font-semibold text-white">PR</span>
<h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-gray-100">Priya Raman</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Co-founder, strategy</p>
</li>
<!-- The hiring tile shares the grid cell so "join us" reads as one of the team. -->
<li>
<a href="#" class="flex h-full min-h-[11rem] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-gray-300 p-6 text-center text-gray-600 transition-colors hover:border-blue-500 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-400 dark:hover:border-blue-400 dark:hover:text-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<span aria-hidden="true" class="inline-flex h-12 w-12 items-center justify-center rounded-full border border-current text-2xl leading-none">+</span>
<span class="text-sm font-semibold">Join us</span>
</a>
</li>
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Meet the team' | Heading text for the card. |
membersrequired | TeamMember[] | - | The people shown in the grid. |
hiringLabel | string | 'Join us' | Hiring label |
hiringHref | string | '#' | Hiring href |
className | string | - | Additional classes merged onto the root element. |
The hiring tile shares the same grid cell as the people, so "join us" reads as one of the team rather than a detached banner; set its text and target with `hiringLabel` and `hiringHref`. The grid reflows 1 → 2 → 3 → 4.