### File

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

### Description

Component for displaying secondary label text within avatar content. Typically used to show additional information like email, role, or status. Content is projected via ng-content and styled as secondary/subdued text. Must be used within eui-avatar-content for proper styling and layout.

Example :

    <eui-avatar>
      <eui-avatar-text>JD</eui-avatar-text>
      <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

- Text content is directly readable by screen readers
- Appears after label in reading order
- Provides additional context about the user or entity

### Notes

- Must be child of eui-avatar-content component
- Styled as secondary/muted text
- Typically displays email, role, department, or status
- Optional - can be omitted if only primary label is needed

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-avatar-content-sublabel`

template

    <ng-content />

styleUrl | `./avatar-content-sublabel.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 ""