Elements

Employee card

View in Figma

Person card with role, location, headshot fallback, and contact/profile links.

Install

npx shadcn@latest add @alix/employeeCard

Preview

Amara Keene

Director, energy transition

London
AK
LinkedInEmailView Profile

Usage

<EmployeeCard
  name="Amara Keene"
  jobTitle="Director, energy transition"
  location="London"
  profileHref="/people/amara-keene"
  linkedIn="https://www.linkedin.com"
  email="amara.keene@example.com"
  profilePicture={{ src: "/brand/portrait-1.jpg", alt: "Portrait of Amara Keene" }}
/>

Examples

01

Profile link only

Omit optional contact links when the card should lead only to the person's profile.

Daniel Cho

Managing Director, transactions

New York
DC
View Profile
<div className="w-full max-w-md">
  <EmployeeCard
    name="Daniel Cho"
    jobTitle="Managing Director, transactions"
    location="New York"
    profileHref="/people/daniel-cho"
    profilePicture={{
      src: "/brand/portrait-2.jpg",
      alt: "Portrait of Daniel Cho",
    }}
  />
</div>
02

Initials fallback

A missing or failed headshot falls back to initials while preserving the same contact layout.

Nora Shah

Senior Vice President, performance improvement

Chicago
NS
EmailView Profile
<div className="w-full max-w-md">
  <EmployeeCard
    name="Nora Shah"
    jobTitle="Senior Vice President, performance improvement"
    location="Chicago"
    profileHref="/people/nora-shah"
    email="nora.shah@example.com"
    profilePicture={{
      src: "",
      alt: "Portrait of Nora Shah",
    }}
    leftBorder
  />
</div>
03

Leadership grid

Use Grid when a curated people row needs equal columns without the full searchable people pattern.

Amara Keene

Director, energy transition

London
AK
LinkedInEmailView Profile

Daniel Cho

Managing Director, transactions

New York
DC
LinkedInView Profile

Nora Shah

Senior Vice President, performance improvement

Chicago
NS
EmailView Profile
<div className="w-full max-w-5xl">
  <Grid columns={3} gap="lg">
    <EmployeeCard
      name="Amara Keene"
      jobTitle="Director, energy transition"
      location="London"
      profileHref="/people/amara-keene"
      linkedIn="https://www.linkedin.com"
      email="amara.keene@example.com"
      profilePicture={{
        src: "/brand/portrait-1.jpg",
        alt: "Portrait of Amara Keene",
      }}
      leftBorder
    />
    <EmployeeCard
      name="Daniel Cho"
      jobTitle="Managing Director, transactions"
      location="New York"
      profileHref="/people/daniel-cho"
      linkedIn="https://www.linkedin.com"
      profilePicture={{
        src: "/brand/portrait-2.jpg",
        alt: "Portrait of Daniel Cho",
      }}
      leftBorder
    />
    <EmployeeCard
      name="Nora Shah"
      jobTitle="Senior Vice President, performance improvement"
      location="Chicago"
      profileHref="/people/nora-shah"
      email="nora.shah@example.com"
      profilePicture={{
        src: "",
        alt: "Portrait of Nora Shah",
      }}
      leftBorder
    />
  </Grid>
</div>

When to use it

Use it for

  • Curated leadership rows, author panels, and practice-team highlights with a stable profile URL.
  • People cards where contact links are optional and the profile link is always present.
  • Rows that can tolerate image fallback initials without changing layout.

Reach for something else

  • Searchable or paginated people directories — use PeopleGridTile or PeopleGrid instead.
  • Generic identity chips or initials beside a label — use Avatar instead.
  • Article, service, or insight teasers — use ContentCard instead.

Props

PropTypeDefaultDescription
profileHrefstring—Stable profile URL, usually derived from a slug or id rather than the person's name.
profilePicture{ src: string; alt: string }—Headshot image data; the avatar falls back to initials when the image cannot load.
leftBorderbooleanfalseAdds the left divider used when cards sit in a grid row.

See also

People grid tilePeople gridAvatarContent card