#Avatar

#Import

import { Avatar } from '@dnb/eufemia'

#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'

#size 'small'

#size 'medium'

#size 'large'

#size 'x-large'

#Setting property variant

#default variant is 'primary'

#variant 'primary'

#variant 'secondary'

#variant 'tertiary'

#Passing icon as children

#Passing image as src

Icons

‌Code

Banks

‌Code

Profiles

‌Code

Images of banks

‌Code

#Grouping Avatars

Eufemia contributors

+3

‌Code