Avatar

Description

Avatars are identifiers that makes people and companies more scannable for payments, spending overviews and social functionality. The fallback for a person is the letter version that uses the first letter of a persons name. A company has the icon version as it’s default/fallback. The badge is used to mark country/currency if needed.

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'

Persons:Ola Nordmann

size 'small'

Text Animals:Duck Text

size 'medium'

Stocks:NFLX

size 'large'

Companies:Amazon

size 'x-large'

TV Shows:Friends

Setting property variant

default variant is 'primary'

Dogs:Kleiner münsterländer

variant 'primary'

Cities:Oslo

variant 'secondary'

Countries:Spain

variant 'tertiary'

Cars:Tesla

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 Friends:AndersBjørnarCathrineDidrikErlend+2 Text
Employees:AndersBjørnarCathrineDidrik+3
Borrowers:AndersBjørnarCathrine+4
Enemies:AndersBjørnar+5
Eufemia contributors:
Profile picture
Profile picture
Profile picture
Profile picture
+3