# User info
> Generated from user-info.contract.json — do not edit by hand.

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.

Surfaces: dashboard, settings, editor, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `name` | string | `—` | The person's full name — rendered as text, and passed to the avatar for initials/alt |
| `email` | string | `—` | Optional email; when present (and not compact) it renders under the name in the default layout |
| `src` | string | `—` | Avatar image URL; falls through to initials of `name` when absent |
| `size` | 'default' | 'compact' | `default` | 'default' → 40px avatar + email row; 'compact' → 24px avatar + name only. Omitting `email` implies compact |

## Visual standard (measured)
- Layout: avatar + (name over email) · gap 8
- Name: 14px · SemiBold 600 · text-default #1A1A1A
- Email: 12px · Regular 400 · text-secondary #8A8A8A
- Avatar: 40 when email shown · 24 name-only (reuses <aha-avatar>)
- Compact: size="compact" (or no email) → 24px avatar + name only

## When to use
- **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

Always provide `name` — it's both the visible label and the avatar's initials/alt. Reach for User info over a plain Avatar whenever the name (and email) belong next to the face; reach for the bare Avatar when only the picture is wanted. Omit `email` (or set size="compact") for a tight one-line identity in menus and dense lists.