Demos
Avatar
To ensure the correct use of Avatars, we require using a Avatar.Group
with Avatar
-components as children.
The required label
-property in Avatar.Group
will ensure the correct use of accessibility for screen readers.
See more examples below.
size
Setting property size
is 'medium'
default Persons:Ola Nordmann
size
'small'
Text Animals:Duck Text
size
'medium'
Stocks:NFLX
size
'large'
Companies:Amazon
size
'x-large'
TV Shows:Friends
variant
Setting property variant
is 'primary'
default Dogs:Kleiner münsterländer
variant
'primary'
Cities:Oslo
variant
'secondary'
Countries:Spain
variant
'tertiary'
Cars:Tesla
children
Passing icon as Icons:
Icons:
Icons:
Logos:
src
Passing image as Icons:
Banks:
Profiles:
Images of banks:
Grouping Avatars
Text Friends:AndersBjørnarCathrineDidrikErlend+2 Text
Employees:AndersBjørnarCathrineDidrik+3
Borrowers:AndersBjørnarCathrine+4
Enemies:AndersBjørnar+5
Eufemia contributors:+3