eui documentation
  1. Components
  2. EuiAvatarContentSublabelComponent

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

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 ""