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
icon
Passing Auto-size
An icon will automatically be given the correct size (size="auto"
) unless the icon's size
prop is set.
Accepted values
The icon
prop can accept either an imported icon, a primary icon string, or an <Icon>
or <IconPrimary>
component.
import {calendar_medium as CalendarMedium,} from '@dnb/eufemia/src/icons'
Icons
children
Passing Logos
Icon as child
A single <Icon>
or <IconPrimary>
component sent as a child will also follow the same auto sizing rules as the icon
prop.
Icons
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




Customizing colors
PersonsOla Nordmann