@forter/avatar

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