Avatar
The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Usage
<wc-avatar name="Shivaji Varma" src="/assets/img/avatar.xs.webp"></wc-avatar>
<wc-avatar name="Shivaji Varma"></wc-avatar>
Theming
You can change the color of the avatar using the --avatar-bg-color CSS variable.
You can change the border radius of the avatar using the --avatar-border-radius CSS variable.
You can change the size of the avatar using the --avatar-size CSS variable.
<wc-avatar style="--avatar-size:150px" name="Shivaji Varma"></wc-avatar>
<wc-avatar style="--avatar-bg-color: var(--color-blue);" name="Shivaji Varma"></wc-avatar>
<wc-avatar style="--avatar-border-radius: var(--shape-corner-small)" name="Shivaji Varma"></wc-avatar>
On this page