Team — Chronological roster with avatar ends

A year rail and aligned biography rows trace when four people joined the group.

ReactHTML

1440 × 900

Component.tsx115 lines

export default function TeamChronologicalRoster() {
  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">
            How the team came together
          </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>
        <ol role="list" className="mt-10 border-b border-neutral-200">
          <li className="grid grid-cols-[3rem_minmax(0,1fr)_2.5rem] items-start gap-4 border-t border-neutral-200 py-6 md:grid-cols-[6rem_minmax(0,1fr)_2.5rem]">
            <span className="font-mono text-sm text-neutral-500">2020</span>
            <div>
              <h3 className="text-lg font-semibold">Alex Rivera</h3>
              <p className="mt-1 text-sm text-neutral-500">Role or specialty</p>
              <p className="text-base text-neutral-600 mt-3">
                A short account of the contribution this person brought to the
                team.
              </p>
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </div>
            <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>
          </li>
          <li className="grid grid-cols-[3rem_minmax(0,1fr)_2.5rem] items-start gap-4 border-t border-neutral-200 py-6 md:grid-cols-[6rem_minmax(0,1fr)_2.5rem]">
            <span className="font-mono text-sm text-neutral-500">2021</span>
            <div>
              <h3 className="text-lg font-semibold">Jamie Quinn</h3>
              <p className="mt-1 text-sm text-neutral-500">Role or specialty</p>
              <p className="text-base text-neutral-600 mt-3">
                A short account of the contribution this person brought to the
                team.
              </p>
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </div>
            <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>
          </li>
          <li className="grid grid-cols-[3rem_minmax(0,1fr)_2.5rem] items-start gap-4 border-t border-neutral-200 py-6 md:grid-cols-[6rem_minmax(0,1fr)_2.5rem]">
            <span className="font-mono text-sm text-neutral-500">2023</span>
            <div>
              <h3 className="text-lg font-semibold">Morgan Chen</h3>
              <p className="mt-1 text-sm text-neutral-500">Role or specialty</p>
              <p className="text-base text-neutral-600 mt-3">
                A short account of the contribution this person brought to the
                team.
              </p>
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </div>
            <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>
          </li>
          <li className="grid grid-cols-[3rem_minmax(0,1fr)_2.5rem] items-start gap-4 border-t border-neutral-200 py-6 md:grid-cols-[6rem_minmax(0,1fr)_2.5rem]">
            <span className="font-mono text-sm text-neutral-500">2024</span>
            <div>
              <h3 className="text-lg font-semibold">Taylor Brooks</h3>
              <p className="mt-1 text-sm text-neutral-500">Role or specialty</p>
              <p className="text-base text-neutral-600 mt-3">
                A short account of the contribution this person brought to the
                team.
              </p>
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </div>
            <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>
          </li>
        </ol>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a team’s growth or sequence of contributions matters. Pick a department roster for organizational grouping. Variations: show project phases instead of years, add five people, or use qualification dates for an advisory group.
Hierarchy: Read the years and names as a sequence, then roles and contribution paragraphs. Limit biographies to 25 words, roles to 4 and names to 3. The profile action follows each biography.
Responsive: The three-column row remains intact at small widths with a 48px year and 40px avatar. Flexible biography text wraps; the year rail widens at 768px.
Layout: A max-w-6xl section places a chronological ordered list below its introduction. Rows have 24px vertical padding, 1px top borders and 16px gaps. A 48px year column becomes 96px at 768px; biography text fills the middle and a 40px avatar anchors the end.
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                          │
│                                                          │
│2020  Alex Rivera / Role                            Avatar│
│      Contribution paragraph                              │
│      [View profile]                                      │
│2021  Jamie Quinn / Role                            Avatar│
│      Contribution paragraph                              │
│      [View profile]                                      │
│2023  Morgan Chen / Role                            Avatar│
│      Contribution paragraph                              │
│      [View profile]                                      │
│2024  Taylor Brooks / Role                          Avatar│
│      Contribution paragraph                              │
│      [View profile]                                      │
└──────────────────────────────────────────────────────────┘

View all

Team — Centred header with portrait grid
Layout tags: centered,grid,media
Team — Department columns with compact rosters
Layout tags: grid,list,compact
Team — Expandable biography list
Layout tags: stacked,list,compact

Team — Chronological roster with avatar ends

Pattern notes

More in Team

Team — Centred header with portrait grid

Team — Department columns with compact rosters

Team — Expandable biography list