Skip to content

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.

Setting property size

default size is 'medium'

PersonsOla Nordmann

size 'small'

Text AnimalsDuck Text

size 'medium'

StocksNFLX

size 'large'

CompaniesAmazon

size 'x-large'

TV ShowsFriends

Setting property variant

default variant is 'primary'

DogsKleiner münsterländer

variant 'primary'

CitiesOslo

variant 'secondary'

CountriesSpain

variant 'tertiary'

CarsTesla

Passing icon as children

Icons
Icons
Icons
Logos

Passing image as src

Icons
DNB Logo
Banks
DNB Logo
Profiles
Profile picture
Images of banks
DNB Logo

Grouping Avatars

Text FriendsAndersBjørnarCathrineDidrikErlend+2 Text
EmployeesAndersBjørnarCathrineDidrik+3
BorrowersAndersBjørnarCathrine+4
EnemiesAndersBjørnar+5
Eufemia contributors
Profile picture
Profile picture
Profile picture
Profile picture
+3