Avatar

This component is an IT representation of a user. It can be used to figures users or to enable an access to a user profile menu.

Usage

Import

npm i @finastra/avatar

import '@finastra/avatar';
...
<fds-avatar large name="Adnen Manai"></fds-avatar>

API

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|-----------|---------|--------------------------------------------------| | dense | dense | boolean | false | Make the avatar smaller | | large | large | boolean | false | Make the avatar bigger | | name | name | string | "" | Name of the avatar, used to generate the initials (Displayed on hover) | | primary | primary | boolean | false | Use theme's primary color as background | | secondary | secondary | boolean | false | Use theme's secondary color as background | | shortName | shortName | string | "" | Use this property to override the initials |

Methods

| Method | Type | |----------------------|--------------------------------------------------| | transformName | (fullName: string, dense?: boolean \| undefined): string | | transformShortName | (shortName: string, dense?: boolean \| undefined): string |

CSS Custom Properties

| Property | Type | Default | Description | |--------------------------|-------|-----------|------------------------------------| | --fds-avatar-font-size | | "16px" | Font size of the avatar | | --fds-avatar-size | | "48px" | Size of the avatar | | --fds-primary | color | "#694ED6" | Color of the start of the gradient | | --fds-secondary | color | "#C137A2" | Color of the end of the gradient |