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 |