## Import

```jsx
import { UserInfo } from "@cfa/react-core";
```

## Live Editor

Use `UserInfo` in panel footers, side navigation shells, and other compact surfaces that need a consistent signed-in user block.

```jsx
<UserInfo name="Truett Cathy" email="truett.cathy@cfa.com" initials="TC" />
```

## Guidelines

### When to use

- UserInfo is a name paired with an Avatar.

### Do

- Always pair Avatar with at least a name. Initials or image alone force people to guess identity.
- Limit UserInfo to a name plus one or two supporting details, such as a role, email, or timestamp.
- Keep name, role, and image from the same account record so identity stays consistent everywhere UserInfo appears.
- Use a horizontal layout in headers, rows, and inline attribution. Use a vertical layout in profile displays.
- Keep Avatar size consistent within a list or table column. Truncate long names in dense layouts.
- When UserInfo opens a Menu, such as an account header, treat it as the Menu trigger.
- When the name is visible, treat the Avatar image as decorative and use empty alt.
- When UserInfo is a Menu trigger, expose expanded state and return focus to UserInfo when the Menu closes.

### Avoid

- Using UserInfo for a standalone portrait. Use Avatar.
- Using UserInfo for non-identity two-line labels.
- Putting extra data on UserInfo. Extra data belongs on a profile Panel.

## Examples

### In SideNavigation

Compose `UserInfo` through the `footer` prop on `SideNavigation`. Place other footer content or navigation items separately when needed.

```jsx
<SideNavigation
  aria-label="Application navigation"
  header={/* panel title */}
  items={items}
  footer={
    <UserInfo
      name="Truett Cathy"
      email="truett.cathy@cfa.com"
      initials="TC"
    />
  }
>
  {children}
</SideNavigation>
```

## Props

### UserInfo

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| email\* | `string` | - | Email or secondary line shown below the name. |
| initials\* | `string` | - | Initials rendered in the avatar when no image is provided. |
| name\* | `string` | - | Display name shown beside the avatar. |
| avatarSize | `"lg" \ | "md" \ | "sm" \ | "xs"` | `md` | Avatar size. |
| children | `ReactNode` | - | The content or child elements nested within this component. |
| className | `string` | - | CSS class names to apply custom styling. |
| id | `string` | - | The unique identifier for the DOM element. |
| imageAlt | `string` | - | Accessible description for the profile image. Defaults to \`name\`. |
| imageSrc | `string` | - | Optional profile image URL. |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |