Components/Avatar Group

fd-avatar-group · 6 examples from SAP's documentation · Back to the gallery

About

The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example. For detailed information check Fiori Design Guidelines for Avatar Group component.

Use the **AvatarGroup** if: - You want to display a group of avatars (more than two). - You want to display several avatars which have something in common. Do not use the **AvatarGroup** if: - You want to display a single avatar. - You want to display a gallery for simple images. - You want to use it for other visual content than avatars.

IndividualType

Business Card

JS
Jason Smith

Marketing Manager

Contact Details

+89181818181
+2828282828

IndividualTypeVertical

GroupType

XS size

WW EW +8

SM size

WW EW +8

MD size

WW EW +8

LG size

WW EW +8

XL size

WW EW +8

GroupTypeVertical

WW EW +8
WW EW +8
WW EW +8
WW EW +8
WW EW +8

GroupTypeInteractionStates

Regular
WW EW +8
Hover
WW EW +8
Active/Toggled
WW EW +8
Disabled
WW EW +8
Focus
WW EW +8963

Overflow

The overflow Avatar inherits the styling of the secondary regular Button control. Applications can also choose to set the background color to a random or specific color from the Avatar. The span element has a \

WW
EW
+4
WW
EW
+19796
WW
EW
+19796
WW
EW
+19796
WW
EW
+19796
WW
EW
+19796
WW
EW
+4
WW
EW
+4
WW
EW
+19678
WW
EW
+19678
WW
EW
+4