# EuiUserProfileCardComponent

**Type:** component



User profile card component that displays detailed user information including avatar, name,
function, and organization. Designed for use within dropdown menus or profile panels.
Automatically fetches user data from UserService and supports impersonation display.

### Basic Usage
```html
<!-- Simple profile card -->
<eui-user-profile-card
  [isShowAvatarInitials]="true"
  (showProfileInfo)="onShowProfile()"
  (closeProfileMenu)="onClose()" />

<!-- With custom avatar -->
<eui-user-profile-card
  [avatarUrl]="user.avatarUrl"
  [reverseNameOrder]="true"
  showDetailsLabel="View Details" />
```

```typescript
onShowProfile(): void {
  this.router.navigate(['/profile']);
}
```

### Accessibility
- Avatar has semantic meaning with user initials or image
- Profile details link is keyboard accessible with tabindex
- User information structured with proper heading hierarchy
- Impersonation status clearly indicated for screen readers

### Notes
- Automatically displays user function and organization if available
- Impersonation mode shows both impersonated and actual user
- Avatar initials computed from user name (configurable order)
- Integrates seamlessly with eui-user-profile dropdown


**Selector:** `eui-user-profile-card`

## Inputs
- **avatarUrl**: `string` - 
- **impersonateLabel**: `string` - 
- **isShowAvatarInitials**: `boolean` - 
- **reverseNameOrder**: `boolean` - If true, the name will be displayed in reverse order (first name, first)
- **showDetailsLabel**: `string` - 

## Outputs
- **closeProfileMenu**: `EventEmitter<void>` - 
- **showProfileInfo**: `EventEmitter<void>` -