Avatar

<gstock-avatar> | GstockAvatar

<gstock-avatar></gstock-avatar>

Color

Utilice el atributo color para cambiar el color del avatar.

<gstock-avatar></gstock-avatar>
<gstock-avatar color="primary"></gstock-avatar>
<gstock-avatar color="secondary"></gstock-avatar>

Tamaño

Utilice el atributo size para cambiar el tamaño del avatar.

<gstock-avatar label="Small" size="small"></gstock-avatar>
<gstock-avatar label="Medium" size="medium"></gstock-avatar>
<gstock-avatar label="Large" size="large"></gstock-avatar>

Imagen

Utilice los atributos image y label para usar una imagen para el avatar. Usa el atributo loading="lazy" para cargar la imagen de forma diferida.

<gstock-avatar image="https://i.pravatar.cc/64?img=8" label="Avatar with image"></gstock-avatar>
<gstock-avatar
  image="https://i.pravatar.cc/64?img=12"
  label="Avatar with image"
  loading="lazy"></gstock-avatar>
<gstock-avatar
  image="https://i.pravatar.cc/64?img=38"
  label="Avatar with image"
  loading="lazy"></gstock-avatar>

Iniciales

Utilice el atributo initials para mostrar algo más personalizado que un ícono, útil cuando no tiene una imagen para usar.

<gstock-avatar initials="G" label="Avatar with initials"></gstock-avatar>
<gstock-avatar initials="GS" label="Avatar with initials"></gstock-avatar>

Icono

Utilice el slot icon para personalizar el icono.

<gstock-avatar label="Avatar with icon">
  <gstock-icon slot="icon" name="image"></gstock-icon>
</gstock-avatar>

<gstock-avatar label="Avatar with icon">
  <gstock-icon slot="icon" name="archive"></gstock-icon>
</gstock-avatar>

<gstock-avatar label="Avatar with icon">
  <gstock-icon slot="icon" name="briefcase"></gstock-icon>
</gstock-avatar>

Redondeado

Utilice el atributo rounded para cambiar la forma del avatar a un aspecto redondeado.

<gstock-avatar rounded label="Rounded"></gstock-avatar>