Team — Working principles with identity footers

Text-first cards introduce each person through a working principle and close with identity and profile links.

ReactHTML

1440 × 900

Component.tsx107 lines

export default function TeamPrincipleProfileCards() {
  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 and their working principles
          </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>
        <ul role="list" className="mt-10 grid gap-6 md:grid-cols-3">
          <li className="flex flex-col rounded-lg border border-neutral-200 p-6">
            <p className="text-sm font-medium text-neutral-500">
              Working principle
            </p>
            <p className="mt-4 text-lg text-neutral-600">
              A short statement about how this person approaches useful work.
            </p>
            <footer className="mt-8 border-t border-neutral-200 pt-5">
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </footer>
          </li>
          <li className="flex flex-col rounded-lg border border-neutral-200 p-6">
            <p className="text-sm font-medium text-neutral-500">
              Team contribution
            </p>
            <p className="mt-4 text-lg text-neutral-600">
              A short statement about the contribution this person brings to a
              team.
            </p>
            <footer className="mt-8 border-t border-neutral-200 pt-5">
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </footer>
          </li>
          <li className="flex flex-col rounded-lg border border-neutral-200 p-6">
            <p className="text-sm font-medium text-neutral-500">
              Personal focus
            </p>
            <p className="mt-4 text-lg text-neutral-600">
              A short statement about the questions this person likes to solve.
            </p>
            <footer className="mt-8 border-t border-neutral-200 pt-5">
              <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-4 inline-block text-sm"
              >
                View profile
              </a>
            </footer>
          </li>
        </ul>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when team values or working approaches deserve more space than portraits. Pick a photo grid for visual introductions. Variations: use a brief personal mission, replace the link with email, or show two longer statements.
Hierarchy: Statements introduce people before their names and roles. Keep each label under 3 words, statement under 25 and role under 4. Profile links name their individual person.
Responsive: Cards stack below 768px. Text remains above identity at every width; the horizontal 40px avatar row allows names and roles to wrap.
Layout: A max-w-6xl section holds three equal cards from 768px with 24px gaps. Each card uses a 1px border, 8px radius and 24px padding. An 18px principle statement sits above an identity footer separated by 32px spacing and a top border.
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                             │
│                                                             │
│Working principle    Team contribution    Personal focus     │
│Statement            Statement            Statement          │
│Statement            Statement            Statement          │
│                                                             │
│Avatar Name          Avatar Name          Avatar Name        │
│Role [View profile]  Role [View profile]  Role [View 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 — Department columns with compact rosters
Layout tags: grid,list,compact

Team — Working principles with identity footers

Pattern notes

More in Team

Team — Centred header with portrait grid

Team — Chronological roster with avatar ends

Team — Department columns with compact rosters