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>
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 |
src | src | string | | URL of avatar image can be png or svg . example: https://www.w3schools.com/w3images/avatar2.png |
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 |