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 PersonsOla Nordmann
size
'small'
Text AnimalsDuck Text
size
'medium'
StocksNFLX
size
'large'
CompaniesAmazon
size
'x-large'
TV ShowsFriends
variant
Setting property variant
is 'primary'
default DogsKleiner münsterländer
variant
'primary'
CitiesOslo
variant
'secondary'
CountriesSpain
variant
'tertiary'
CarsTesla
children
Passing icon as Icons
Icons
Icons
Logos
src
Passing image as Icons
Banks
Profiles
Images of banks
Grouping Avatars
Text FriendsAndersBjørnarCathrineDidrikErlend+2 Text
EmployeesAndersBjørnarCathrineDidrik+3
BorrowersAndersBjørnarCathrine+4
EnemiesAndersBjørnar+5
Eufemia contributors+3