eui documentation
  1. Components
  2. EuiAvatarContentComponent

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

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