Components/Avatar

The avatar control is used for presenting various images, including user profiles, user initials, placeholder images, icons, or business-related images like product pictures.

Use avatar to display: - A user’s image or initials - Standardized images for business-related content (such as products, company logos, ad campaign images etc.) - Icons - Images with a transparent background - Placeholder images Do not use avatar if: - You want to display an image for any other use case. Instead, use the **Image** component. - You want to display images in a carousel. Instead, use the **Carousel** component. - You want to display an interactive icon. Instead, use the **Button** component with an icon inside.

An avatar is a visual representation of an user or a product in the digital space. For representing a person, the circular shape is used. For representing a product or object, the square shape is used. This type of Avatar requires the \

The initials avatar can display up to three alphabetical characters representing the first and last name(s) of a person, for example: MvV for Marjolein van Veen. The order in which the first and last name(s) are displayed depends on the language-specific settings. If more than 3 initials are required to display longer names, then a gender-neutral person icon should be displayed instead. If the three letters does not fit in the shape (e.g. WWW), then the genderneutral person icon is used as a fallback.

Placeholders are used when there is no other image available. Avatar and standardized images require placeholders. The default placeholder for an avatar is a gender-neutral person icon inside a circle. The default placeholder for a business image is a neutral product icon inside a square.

The circular shape is used mainly to represent a person. For this type of Avatar use the `fd-avatar--circle` modifier class with the `fd-avatar` base class. Business images display a product, company, object, logo, or other business-related content. Always use a square (default) for business images.

A transparent style can be displayed by adding the `fd-avatar--transparent` modifier class to the `fd-avatar` base class. This can be useful for displaying descriptive illustrations and decorative pictures, for example.

An avatar with a placeholder background can be displayed by adding the `fd-avatar--placeholder` modifier class.

An avatar with a tile icon background can be displayed by adding the `fd-avatar--tile` modifier class.

The Avatar can have different background colors depending on the scenario. To change the accent or indication background color, add the `fd-avatar--accent-color-*` or `fd-avatar--indication-color-*` class with the number indicating the desired color. The color options include numbers ranging from 1 to 10, for example: `fd-avatar--accent-color-10` or `fd-avatar--indication-color-7`.

When used in Shell header context, an additional modifier class `fd-avatar--shell` should be added to the `fd-avatar` base class and the modifier class specifying the accent color `fd-avatar--accent-color-*`.

Each interactive avatar type can have an optional badge and icon assigned. A badge is used to indicate that the avatar is interactive. An icon is used to indicate the action triggered by clicking the avatar (e.g. edit images, take a picture, zoom in).

Value States can be added to the Avatar badge. For positive value state use the \

The avatar's badge color is extended with the first set of indication color palette. Use modifier classes \

You can add a very subtle border to the avatar with the `fd-avatar--border` modifier class.