Profile

User/person information.

html

<div class="profile profile--online " style="--c:#A8E6C1;">
  <span class="profile__avatar" role="img" aria-label="Priya Nair">
    PN
    <svg class="profile__presence" width="9" height="9" viewBox="0 0 9 9" aria-hidden="true"><circle cx="4.5" cy="4.5" r="4"/></svg>
  </span>
  <div class="profile__text">
    <strong class="profile__name">Priya Nair</strong>
    <span class="profile__role">Principal Engineer</span>
    <span class="profile__org">Clydeford Ltd</span>
  </div>
</div>
<style>
.profile { display: flex; align-items: center; gap: 12px; font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 300px; }
.profile__avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c); font-weight: 700; flex: none; }
.profile__presence { position: absolute; bottom: -1px; right: -1px; border-radius: 50%; border: 2px solid #FAF7F2; }
.profile--online .profile__presence circle { fill: #2f8f4e; }
.profile--away .profile__presence circle { fill: #E8A020; }
.profile--offline .profile__presence circle { fill: none; stroke: #24143055; stroke-width: 1.2; }
.profile__name { display: block; }
.profile__role { display: block; font-size: 13px; }
.profile__org { display: block; font-size: 12px; opacity: .7; }
.profile--compact .profile__org { display: none; }
.profile--compact .profile__avatar { width: 36px; height: 36px; font-size: 13px; }
</style>

tailwind

<div class="profile-tw profile-tw--online  flex items-center gap-3 font-sans text-[#241430] max-w-xs" style="--c:#A8E6C1;">
  <span class="profile-tw__avatar relative inline-flex items-center justify-center w-12 h-12 rounded-full font-bold flex-none" style="background:var(--c);" role="img" aria-label="Priya Nair">
    PN
    <svg class="profile-tw__presence absolute -bottom-px -right-px rounded-full border-2 border-[#FAF7F2]" width="9" height="9" viewBox="0 0 9 9" aria-hidden="true"><circle cx="4.5" cy="4.5" r="4"/></svg>
  </span>
  <div class="profile-tw__text">
    <strong class="block">Priya Nair</strong>
    <span class="block text-[13px]">Principal Engineer</span>
    <span class="profile-tw__org block text-xs opacity-70">Clydeford Ltd</span>
  </div>
</div>
<style>
.profile-tw--online .profile-tw__presence circle { fill: #2f8f4e; }
.profile-tw--away .profile-tw__presence circle { fill: #E8A020; }
.profile-tw--offline .profile-tw__presence circle { fill: none; stroke: #24143055; stroke-width: 1.2; }
.profile-tw--compact .profile-tw__org { display: none; }
.profile-tw--compact .profile-tw__avatar { width: 36px; height: 36px; font-size: 13px; }
</style>

react

export function Profile({
  name = "Priya Nair",
  role = "Principal Engineer",
  org = "Clydeford Ltd",
  status = "online",
  color = "#A8E6C1",
  compact = false,
}) {
  const dot = { online: "#2f8f4e", away: "#E8A020", offline: "none" }[status] ?? "#2f8f4e";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 300 }}>
      <span role="img" aria-label={name} style={{ position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: compact ? 36 : 48, height: compact ? 36 : 48, borderRadius: "50%", background: color, fontWeight: 700, fontSize: compact ? 13 : 16, flex: "none" }}>
        PN
        <svg width="9" height="9" viewBox="0 0 9 9" aria-hidden="true" style={{ position: "absolute", bottom: -1, right: -1, borderRadius: "50%", border: "2px solid #FAF7F2" }}>
          <circle cx="4.5" cy="4.5" r="4" fill={dot} stroke={status === "offline" ? "#24143055" : "none"} strokeWidth={status === "offline" ? 1.2 : 0} />
        </svg>
      </span>
      <div>
        <strong style={{ display: "block" }}>{name}</strong>
        <span style={{ display: "block", fontSize: 13 }}>{role}</span>
        {!compact && <span style={{ display: "block", fontSize: 12, opacity: 0.7 }}>{org}</span>}
      </div>
    </div>
  );
}