Avatars
Avatars have the following properties which are optional:
| Property | Required? | Type | Options | Description |
|---|---|---|---|---|
| bgColor | no | string |
|
Background color for the Avatar (useful when no image is present) |
| borderColor | no | string |
|
Border color around the avatar |
| label | no | string | Text to display inside of the avatar. Usually best with 1-2 characters. | |
| img | no | string | Relative path to the avatar's image | |
| size | no | string |
|
The size of the avatar |
Basic Example
Basic Avatar with the default size and user's initials
1<x-fcui-avatar img="https://i.pravatar.cc/60" />
Advanced Example
Avatar with a lg size, Bb as the label, warning as the borderColor, and warning as the type.
1<x-fcui-avatar size="md" label="Bb" borderColor="warning" bgColor="warning"/>
Bb