Profile card

Avatar, name, role, and links — a clean team-member or user card.

Widely Supported

uino-js

Quick implementation

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  background: oklch(0.19 0.02 260);
  border: 1px solid oklch(0.25 0.02 260);
  border-radius: 1rem;
  text-align: center;
}

.profile-card .avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card .role {
  font-size: 0.85rem;
  color: oklch(0.63 0.02 260);
}

.profile-card .links {
  display: flex;
  gap: 0.75rem;
}

.profile-card .links a {
  color: oklch(0.63 0.02 260);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s ease-out;
}

.profile-card .links a:hover {
  color: oklch(0.72 0.19 265);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a profile card component.

Goal: A centered card with circular avatar, name, role/title, and social links row — no JavaScript.

Technical constraints:
- Use flexbox column layout with centered alignment.
- Avatar: border-radius: 50% with object-fit: cover for images, or initials fallback.
- Use oklch() for all colors, not hex or rgba().
- Links should transition color on hover.
- Card should have border, border-radius: 1rem, and subtle background.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept avatar (URL or initials), name, role, and links (array of {label, href}).

Edge cases to handle:
- Missing avatar image should show initials or a default icon.
- Long names should truncate with ellipsis, not break the layout.
- Social links row should wrap gracefully if there are many links.

Return HTML + CSS.

Why this matters in 2026

Profile cards appear on team pages, user dashboards, comment sections, and social feeds. A well-structured profile card with proper avatar handling and consistent spacing eliminates one of the most commonly rebuilt components.

The logic

flex-direction: column stacks the avatar, name, role, and links vertically. align-items: center centers everything horizontally. The avatar uses border-radius: 50% for a perfect circle and object-fit: cover to crop non-square images without distortion. The links row is a nested flex container with gap for consistent spacing.

Accessibility & performance

Avatar images should have meaningful alt text (e.g., "Photo of Alex Morgan"). If using decorative initials instead of an image, mark them with aria-hidden="true" since the name is already present as text. Links should have descriptive text or aria-label if using icon-only social links.