Team — Department columns with compact rosters

Three equal department columns contain a short focus statement and small avatar rosters.

ReactHTML

1440 × 900

Component.tsx181 lines

export default function TeamDepartmentColumns() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header>
          <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl mt-3">
            People grouped by their focus
          </h2>
          <p className="text-lg text-pretty text-neutral-600 mt-4 max-w-2xl">
            A short introduction that names the audience and the benefit.
          </p>
        </header>
        <div className="mt-10 grid gap-8 md:grid-cols-3">
          <section className="border-t border-neutral-200 pt-6">
            <h3 className="text-lg font-semibold">Leadership</h3>
            <p className="text-sm text-neutral-600 mt-2">
              Short description of this group’s focus.
            </p>
            <ul role="list" className="mt-6 space-y-5">
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    AR
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Alex Rivera</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Alex Rivera profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    JQ
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Jamie Quinn</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Jamie Quinn profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
            </ul>
          </section>
          <section className="border-t border-neutral-200 pt-6">
            <h3 className="text-lg font-semibold">Design</h3>
            <p className="text-sm text-neutral-600 mt-2">
              Short description of this group’s focus.
            </p>
            <ul role="list" className="mt-6 space-y-5">
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    MC
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Morgan Chen</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Morgan Chen profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    TB
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Taylor Brooks</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Taylor Brooks profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
            </ul>
          </section>
          <section className="border-t border-neutral-200 pt-6">
            <h3 className="text-lg font-semibold">Engineering</h3>
            <p className="text-sm text-neutral-600 mt-2">
              Short description of this group’s focus.
            </p>
            <ul role="list" className="mt-6 space-y-5">
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    SP
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Sam Patel</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Sam Patel profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
              <li>
                <div className="flex items-center gap-3">
                  <span
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                  >
                    RM
                  </span>
                  <div className="min-w-0">
                    <h3 className="text-base font-semibold">Riley Morgan</h3>
                    <p className="text-sm text-neutral-500">
                      Role or specialty
                    </p>
                  </div>
                </div>
                <a
                  href="#"
                  aria-label="View Riley Morgan profile"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-2 ml-13 inline-block text-sm"
                >
                  Profile
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when departmental grouping is the main way to scan a small team. Pick a flat portrait grid for one undivided group. Variations: add a third person to each department, show disciplines instead of departments, or put a shared contact link below each group.
Hierarchy: Read the section heading, department names and focus statements before names and roles. Keep department focus under 10 words, roles under 4 and names under 3. Every profile link includes its person in its accessible label.
Responsive: Departments stack below 768px. Identity rows remain horizontal inside each column; profile links align beneath the identity copy.
Layout: A max-w-6xl section forms three equal department columns at 768px with 32px gaps. Each column starts with a top border and 24px padding, then a title, 14px focus statement and two member rows separated by 20px. Avatars are 40px.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                          │
│                                                          │
│Leadership          Design              Engineering       │
│Group focus         Group focus         Group focus       │
│Avatar Name         Avatar Name         Avatar Name       │
│Role [Profile]      Role [Profile]      Role [Profile]    │
│Avatar Name         Avatar Name         Avatar Name       │
│Role [Profile]      Role [Profile]      Role [Profile]    │
└──────────────────────────────────────────────────────────┘

View all

Team — Centred header with portrait grid
Layout tags: centered,grid,media
Team — Chronological roster with avatar ends
Layout tags: list,numbers,spacious
Team — Expandable biography list
Layout tags: stacked,list,compact

Team — Department columns with compact rosters

Pattern notes

More in Team

Team — Centred header with portrait grid

Team — Chronological roster with avatar ends

Team — Expandable biography list