Profile View

Detailed person/account representation.

Priya Shah

Senior Product Designer

Email
priya@example.com
Location
Bristol, UK
Joined

html

<div class="profile profile--full">
  <div class="profile__identity">
    <svg class="profile__avatar" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
      <circle cx="32" cy="32" r="32" fill="#D9C8F0" />
      <text x="32" y="39" text-anchor="middle" font-family="system-ui, sans-serif" font-size="22" font-weight="700" fill="#241430">PS</text>
    </svg>
    <div>
      <h3 class="profile__name">Priya Shah</h3>
      <p class="profile__role">Senior Product Designer</p>
    </div>
  </div>
  <dl class="profile__fields">
    <div class="profile__field">
      <dt>Email</dt>
      <dd>priya@example.com</dd>
    </div>
    <div class="profile__field">
      <dt>Location</dt>
      <dd>Bristol, UK</dd>
    </div>
    <div class="profile__field profile__field--joined">
      <dt>Joined</dt>
      <dd><time datetime="2022-03-12">12 March 2022</time></dd>
    </div>
  </dl>
</div>
<style>
.profile { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 14px; padding: 22px; box-sizing: border-box; width: 340px; }
.profile__identity { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile__name { margin: 0; font-size: 17px; font-weight: 700; }
.profile__role { margin: 2px 0 0; font-size: 13px; color: #241430aa; }
.profile__fields { display: grid; gap: 10px; margin: 0; }
.profile__field { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; }
.profile__field dt { margin: 0; font-weight: 600; color: #241430aa; }
.profile__field dd { margin: 0; }
.profile--compact { width: 260px; padding: 16px; }
.profile--compact .profile__identity { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.profile--compact .profile__fields { gap: 6px; }
.profile--compact .profile__field { grid-template-columns: 1fr; gap: 0; }
.profile--compact .profile__field--joined { display: none; }
</style>

tailwind

<div class="profile-tw profile-tw--full bg-[#FAF7F2] text-[#241430] font-sans rounded-2xl p-[22px] box-border w-[340px]">
  <div class="profile-tw__identity flex items-center gap-3.5 mb-4">
    <svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true" class="shrink-0">
      <circle cx="32" cy="32" r="32" fill="#D9C8F0" />
      <text x="32" y="39" text-anchor="middle" font-family="system-ui, sans-serif" font-size="22" font-weight="700" fill="#241430">PS</text>
    </svg>
    <div>
      <h3 class="m-0 text-[17px] font-bold">Priya Shah</h3>
      <p class="mt-0.5 mb-0 text-sm text-[#241430aa]">Senior Product Designer</p>
    </div>
  </div>
  <dl class="profile-tw__fields grid gap-2.5 m-0">
    <div class="grid grid-cols-[90px_1fr] gap-2 text-sm">
      <dt class="m-0 font-semibold text-[#241430aa]">Email</dt>
      <dd class="m-0">priya@example.com</dd>
    </div>
    <div class="grid grid-cols-[90px_1fr] gap-2 text-sm">
      <dt class="m-0 font-semibold text-[#241430aa]">Location</dt>
      <dd class="m-0">Bristol, UK</dd>
    </div>
    <div class="profile-tw__joined grid grid-cols-[90px_1fr] gap-2 text-sm">
      <dt class="m-0 font-semibold text-[#241430aa]">Joined</dt>
      <dd class="m-0"><time datetime="2022-03-12">12 March 2022</time></dd>
    </div>
  </dl>
</div>
<style>
.profile-tw--compact { width: 260px; padding: 16px; }
.profile-tw--compact .profile-tw__identity { flex-direction: column; align-items: flex-start; gap: 8px; }
.profile-tw--compact .profile-tw__fields > div { grid-template-columns: 1fr; gap: 0; }
.profile-tw--compact .profile-tw__joined { display: none; }
</style>

react

export function ProfileView({
  name = "Priya Shah",
  role = "Senior Product Designer",
  email = "priya@example.com",
  location = "Bristol, UK",
  joined = "12 March 2022",
  layout = "full",
}) {
  const compact = layout === "compact";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", borderRadius: compact ? 12 : 14, padding: compact ? 16 : 22,
      boxSizing: "border-box", width: compact ? 260 : 340 }}>
      <div style={{ display: "flex", flexDirection: compact ? "column" : "row",
        alignItems: compact ? "flex-start" : "center", gap: compact ? 8 : 14,
        marginBottom: compact ? 12 : 16 }}>
        <svg viewBox="0 0 64 64" width={64} height={64} aria-hidden="true">
          <circle cx="32" cy="32" r="32" fill="#D9C8F0" />
          <text x="32" y="39" textAnchor="middle" fontFamily="system-ui, sans-serif" fontSize="22" fontWeight="700" fill="#241430">PS</text>
        </svg>
        <div>
          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>{name}</h3>
          <p style={{ margin: "2px 0 0", fontSize: 13, color: "#241430aa" }}>{role}</p>
        </div>
      </div>
      <dl style={{ display: "grid", gap: compact ? 6 : 10, margin: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "90px 1fr", gap: compact ? 0 : 8, fontSize: 13 }}>
          <dt style={{ margin: 0, fontWeight: 600, color: "#241430aa" }}>Email</dt>
          <dd style={{ margin: 0 }}>{email}</dd>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "90px 1fr", gap: compact ? 0 : 8, fontSize: 13 }}>
          <dt style={{ margin: 0, fontWeight: 600, color: "#241430aa" }}>Location</dt>
          <dd style={{ margin: 0 }}>{location}</dd>
        </div>
        {!compact && (
          <div style={{ display: "grid", gridTemplateColumns: "90px 1fr", gap: 8, fontSize: 13 }}>
            <dt style={{ margin: 0, fontWeight: 600, color: "#241430aa" }}>Joined</dt>
            <dd style={{ margin: 0 }}><time dateTime="2022-03-12">{joined}</time></dd>
          </div>
        )}
      </dl>
    </div>
  );
}