Profile Card

Person/profile summary.

html

<article class="profcard profcard--online" style="--c:#F5C2E0;">
  <span class="profcard__avatar" role="img" aria-label="Alex Chen">
    AC
    <svg class="profcard__presence" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4.5"/></svg>
  </span>
  <h3 class="profcard__name">Alex Chen</h3>
  <p class="profcard__role">VP Engineering</p>
  <p class="profcard__org">Clydeford Ltd</p>
</article>
<style>
.profcard { text-align: center; font: 14px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-radius: 12px; padding: 20px; max-width: 220px; }
.profcard__avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c); font-weight: 700; margin-bottom: 10px; }
.profcard__presence { position: absolute; bottom: 0; right: 0; border-radius: 50%; border: 2px solid #FAF7F2; }
.profcard--online .profcard__presence circle { fill: #2f8f4e; }
.profcard--away .profcard__presence circle { fill: #E8A020; }
.profcard--offline .profcard__presence circle { fill: none; stroke: #24143055; stroke-width: 1.2; }
.profcard__name { margin: 0 0 2px; font-size: 15px; }
.profcard__role { margin: 0; font-size: 13px; opacity: .8; }
.profcard__org { margin: 2px 0 0; font-size: 11px; opacity: .6; }
</style>

tailwind

<article class="profcard-tw profcard-tw--online text-center font-sans text-[14px] text-[#241430] border border-[#24143018] rounded-xl p-5 max-w-[220px]" style="--c:#F5C2E0;">
  <span class="profcard-tw__avatar relative inline-flex items-center justify-center w-14 h-14 rounded-full font-bold mb-2.5" style="background:var(--c);" role="img" aria-label="Alex Chen">
    AC
    <svg class="profcard-tw__presence absolute bottom-0 right-0 rounded-full border-2 border-[#FAF7F2]" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4.5"/></svg>
  </span>
  <h3 class="m-0 text-[15px]">Alex Chen</h3>
  <p class="m-0 text-[13px] opacity-80">VP Engineering</p>
  <p class="mt-0.5 mb-0 text-[11px] opacity-60">Clydeford Ltd</p>
</article>
<style>
.profcard-tw--online .profcard-tw__presence circle { fill: #2f8f4e; }
.profcard-tw--away .profcard-tw__presence circle { fill: #E8A020; }
.profcard-tw--offline .profcard-tw__presence circle { fill: none; stroke: #24143055; stroke-width: 1.2; }
</style>

react

export function ProfileCard({
  name = "Alex Chen",
  role = "VP Engineering",
  org = "Clydeford Ltd",
  status = "online",
  color = "#F5C2E0",
}) {
  const dot = { online: "#2f8f4e", away: "#E8A020", offline: "none" }[status] ?? "#2f8f4e";
  return (
    <article style={{ textAlign: "center", font: "14px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderRadius: 12, padding: 20, maxWidth: 220 }}>
      <span role="img" aria-label={name} style={{ position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: 56, height: 56, borderRadius: "50%", background: color, fontWeight: 700, marginBottom: 10 }}>
        AC
        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style={{ position: "absolute", bottom: 0, right: 0, borderRadius: "50%", border: "2px solid #FAF7F2" }}>
          <circle cx="5" cy="5" r="4.5" fill={dot} stroke={status === "offline" ? "#24143055" : "none"} strokeWidth={status === "offline" ? 1.2 : 0} />
        </svg>
      </span>
      <h3 style={{ margin: "0 0 2px", fontSize: 15 }}>{name}</h3>
      <p style={{ margin: 0, fontSize: 13, opacity: 0.8 }}>{role}</p>
      <p style={{ margin: "2px 0 0", fontSize: 11, opacity: 0.6 }}>{org}</p>
    </article>
  );
}