### File

`packages/components/eui-avatar/avatar-content/avatar-content.component.ts`

### Description

Component for displaying textual content alongside an avatar. Serves as a container for avatar-content-label and avatar-content-sublabel subcomponents. Typically used to show user name and additional information like email or role. Content is projected via ng-content and styled to align properly with the avatar. Must be used within an eui-avatar parent component for proper layout.

Example :

    <eui-avatar>
      <eui-avatar-image src="user.jpg"></eui-avatar-image>
      <eui-avatar-content>
        <eui-avatar-content-label>John Doe</eui-avatar-content-label>
        <eui-avatar-content-sublabel>john.doe@ec.europa.eu</eui-avatar-content-sublabel>
      </eui-avatar-content>
    </eui-avatar>

### Accessibility

- Content is readable by screen readers in natural reading order
- Label and sublabel are semantically grouped for context
- Use meaningful text that identifies the user or entity

### Notes

- Must be direct child of eui-avatar component
- Typically contains eui-avatar-content-label and eui-avatar-content-sublabel
- Layout can be reversed using isReverse on parent eui-avatar
- Automatically styled to align with avatar size variants

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-avatar-content`
templateUrl | `./avatar-content.html`
styleUrl | `./avatar-content.scss`

### Index

###### Methods

- cssClasses

### Methods

cssClasses
`cssClasses()`
Binds the CSS class 'eui-avatar-list' to the host element. This class provides the styling necessary for arranging avatars in a list. Returns : `string` The CSS class name

# results matching ""

# No results matching ""