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-container-shape: var(--shape-corner-small);" name="Shivaji Varma"></wc-avatar>

  <wc-avatar style="--avatar-container-color: var(--color-red);" name="Shivaji Varma"></wc-avatar>