Profile cards, sidebar badges, and team-member rows need a standard way to display an avatar alongside a name and optional role or status line. Without this primitive, every page redraws the same flex layout, manages fallback text, and repeats the dark-mode color tokens — resulting in inconsistent typography scales and redundant markup when rendered at different sizes.

Profile is a presentational composite component that pairs an Avatar with typography for name and optional subtitle. It accepts three size variants ("sm", "md", "lg") that scale both the avatar and text together, an optional status indicator ("online", "offline", "busy", "away") passed to the nested Avatar, and image props (src, alt, fallback) to control the avatar's appearance.

Import from @particle-academy/react-fancy, render <Profile name="Alex Chen" subtitle="Product Lead" src="/avatar.jpg" status="online" size="md" />, and customize with className for layout overrides. The component renders a data-react-fancy-profile attribute for stable DOM targeting.