注目新着
チームTeam Grid Cards
A responsive card grid of people with gradient-initials avatars, names and roles.
#team#grid#cards
3 個のフレームワーク初級
Loading…
An avatar-free, typographic list of names and roles that reflows into columns.
<section class="mx-auto w-full max-w-5xl 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">The team</h2>
<!-- No avatars on purpose: names carry the weight. Reflows 1 -> 2 -> 3. -->
<ul class="mt-8 grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2 lg:grid-cols-3">
<li class="border-t border-gray-200 pt-4 dark:border-gray-800">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Priya Raman</h3>
<p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">Co-founder, strategy</p>
</li>
<li class="border-t border-gray-200 pt-4 dark:border-gray-800">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Tom Ashcroft</h3>
<p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">Head of engineering</p>
</li>
</ul>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | 'The team' | カードの見出しテキスト。 |
members必須 | TeamMember[] | - | グリッドに表示するメンバー。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Deliberately avatar-free - the names carry the weight, separated by hairline rules and reflowing 1 → 2 → 3 columns. Feed it `members` of `{ name, role }`; it is the lightest possible team block.