Team Member Card

<div class="team-card">

  <div class="team-avatar">
    AM
  </div>

  <h2>Alex Morgan</h2>

  <span class="team-role">
    UI Designer
  </span>

  <p>
    Creating clean and modern digital experiences
    with a strong focus on usability and detail.
  </p>

  <div class="team-socials">

    <a href="#" aria-label="LinkedIn">in</a>
    <a href="#" aria-label="Twitter">X</a>
    <a href="#" aria-label="Dribbble">Dr</a>

  </div>

</div>

.team-card{
  width:100%;
  max-width:340px;
  padding:32px;
  text-align:center;
  background:#08111f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.team-card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 28px rgba(34,211,238,.12);
}

.team-avatar{
  width:78px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
  font-size:24px;
  font-weight:800;
}

.team-card h2{
  margin:0 0 6px;
  color:#ffffff;
  font-size:22px;
}

.team-role{
  display:block;
  margin-bottom:16px;
  color:#22d3ee;
  font-size:13px;
  font-weight:700;
}

.team-card p{
  margin:0 0 22px;
  color:#9fb3cc;
  font-size:14px;
  line-height:1.6;
}

.team-socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.team-socials a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #263750;
  border-radius:10px;
  background:#0b1423;
  color:#aab4c8;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:.2s ease;
}

.team-socials a:hover{
  color:#ffffff;
  border-color:#22d3ee;
  transform:translateY(-3px);
  box-shadow:0 0 16px rgba(34,211,238,.16);
}

How This Team Member Card Works

The Team Member Card is a simple profile component built with HTML and CSS. It presents a team member’s initials, name, role, short bio, and social links inside a compact centered layout. The published component does not use JavaScript, so all of its interaction is handled through CSS hover states and transitions.

The main .team-card uses width: 100% together with max-width: 340px. This allows the card to shrink with its parent container while preventing it from becoming wider than 340px. The card has 32px padding, centered text, a dark #08111f background, a thin semi-transparent border, and a 20px border radius.

A soft box-shadow gives the card separation from the page background. The card also defines transitions for transform, border-color, and box-shadow, all running over .3s ease. When the user hovers over the card, translateY(-7px) lifts the entire panel slightly upward. At the same time, the border becomes more cyan and the shadow expands with a subtle cyan glow.

The profile graphic is created by .team-avatar. Instead of using an image, the HTML contains the initials “AM.” The avatar is a 78px by 78px circle built with Flexbox so the initials remain centered both horizontally and vertically. Its background uses a 135deg linear gradient from cyan #22d3ee to purple #8b5cf6.

The member name appears in an <h2> element. It uses a 22px font size with only 6px of bottom margin, keeping it visually close to the role displayed below. The .team-role element is styled in cyan with a 13px font size and font-weight: 700, making the position easy to distinguish from the rest of the profile text.

The description underneath uses the softer #9fb3cc color so it does not compete with the member name. Its 14px font size and line-height: 1.6 keep the short biography readable inside the narrow card.

At the bottom, .team-socials uses Flexbox to center three social links with a 10px gap. The HTML includes LinkedIn, X, and Dribbble placeholders represented by the text “in,” “X,” and “Dr.” Each link also includes an aria-label, which gives assistive technologies a clearer description than the abbreviated visible text.

Each social button measures 36px by 36px and uses Flexbox for centering. The default design uses a dark #0b1423 background, a #263750 border, and a 10px border radius. On hover, the text becomes white, the border changes to cyan, and the button moves upward by 3px.

The social hover state also adds a small cyan shadow using box-shadow: 0 0 16px rgba(34,211,238,.16). Since each link uses a .2s ease transition, the lift, border change, and glow happen smoothly rather than appearing instantly. For more detail on how this timing shorthand works, see the MDN CSS transition documentation.

Because the card contains no fixed outer layout or JavaScript behavior, it is easy to place inside a grid or Flexbox team section. Its width: 100% and max-width combination also means the card itself can adapt to narrower containers without requiring a separate media query.

Customizing This Team Member Card

The published styles contain several values that can be changed to match a different team page or visual identity.

• Change the 340px max-width to make each profile card wider or narrower.
• Adjust the 32px padding and 20px border radius to change the spacing and card shape.
• Replace #08111f and #0b1423 to use different card and social-button backgrounds.
• Change #22d3ee and #8b5cf6 to customize the avatar gradient and accent color.
• Replace the “AM” initials with the initials of another team member.
• Edit the 22px, 13px, and 14px font sizes for the name, role, and biography.
• Adjust translateY(-7px) on the card or translateY(-3px) on the social links to make the hover movement stronger or softer.
• Replace the member name, job title, description, social labels, and href values with real profile information.

Where to Use This Team Member Card

This card works well anywhere a short professional profile needs to be presented in a compact and consistent format.

• Company team and leadership pages.
• Agency staff sections.
• Startup founder profiles.
• Portfolio collaborator sections.
• Conference speaker grids.
• Project contributor listings.
• About pages featuring employees or creative partners.

Because the component is small and uses a consistent maximum width, several cards can be arranged easily in a responsive grid. For a card design with a much stronger visual interaction, the 3D Hover Monster Cards component is another related CodeRipple example.

Frequently Asked Questions

Does the Team Member Card use JavaScript?

No. The published component contains HTML and CSS only. The card lift, border glow, social-button movement, and other interactive feedback are all created with CSS hover rules.

Can I use a real profile photo instead of initials?

The current component uses text initials inside .team-avatar. You can replace that content with your own profile markup if needed, but the published version itself uses the “AM” initials rather than an image.

Is the Team Member Card responsive?

There is no separate media query in the published CSS. However, the card uses width: 100% and max-width: 340px, so it can shrink with a narrower parent container while keeping its maximum desktop width.

Why do the social links include aria-label attributes?

The visible social labels are abbreviated as “in,” “X,” and “Dr.” The aria-label values provide clearer names such as LinkedIn, Twitter, and Dribbble for assistive technologies.

The Team Member Card keeps its implementation lightweight by combining a flexible profile layout, gradient avatar, readable content hierarchy, and CSS-only hover feedback without requiring JavaScript.