## User info
A person/identity row — an avatar next to a name, with an optional email underneath.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-user-info> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, settings, editor, audience.
Props:
- name: string, default —. The person's full name — rendered as text, and passed to the avatar for initials/alt
- email: string, default —. Optional email; when present (and not compact) it renders under the name in the default layout
- src: string, default —. Avatar image URL; falls through to initials of `name` when absent
- size: 'default' | 'compact', default default. 'default' → 40px avatar + email row; 'compact' → 24px avatar + name only. Omitting `email` implies compact
Tokens: text-default, text-tertiary, font-product.
Use when: User info (showing a person's identity as a row — avatar + name (+ email): a member list, an author byline, an account switcher); Avatar (just the picture/initials with no name text beside it); Descriptions (a labelled field grid about an entity, not a compact identity row).