fc-avatar
Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
Usage
<script>
import '@forter/avatar';
</script>
<fc-avatar>
</fc-avatar>Examples
<!-- Avatar Badge -->
<fc-avatar>
<fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button>
</fc-avatar>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
abbr |
abbr |
string |
two chars in the generated avatar. | |
alt |
alt |
string |
"User Avatar" | alternative text for accessibility. example: with
|
showRawText |
showRawText |
boolean |
||
src |
src |
string |
URL of avatar image can be png or svg. example: https://www.w3schools.com/w3images/avatar2.png
|
Slots
| Name | Description |
|---|---|
| avatar badge element. |
CSS Custom Properties
| Property | Description |
|---|---|
--fc-avatar-background-color |
the color. default: transparent, example: gold
|
--fc-avatar-font-size |
abbr font size. default: 3em, example: 18px
|
--fc-avatar-hover-background-color |
the color. default: var(--fc-gray-300), example: var(--fc-red-100)
|
--fc-avatar-size |
height and width. default: 48px, example: 96px
|