@forter/avatar NPM

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`