Avatar
Avatar
El avatar es un elemento que representa a un objeto o entidad. Normalmente se emplea para mostrar una miniatura de una foto del usuario o una representación visual de algún tipo de contenido.
- HTML
- JS
<div class="ulpgcds-avatar"><img alt="Nombre de la persona" src="/sites/default/files/2020-01/avatar_ulpgc_example.jpg" /></div>
<div class="ulpgcds-avatar ulpgcds-avatar--big"><img alt="Nombre de la persona" src="/sites/default/files/2020-01/avatar_ulpgc_example.jpg" /></div>
<div class="ulpgcds-avatar ulpgcds-avatar--small"><img alt="Nombre de la persona" src="/sites/default/files/2020-01/avatar_ulpgc_example.jpg" /></div>
<div class="ulpgcds-avatar ulpgcds-avatar--large"><img alt="Nombre de la persona" src="/sites/default/files/2020-01/avatar_ulpgc_example.jpg" /></div> Variantes
Versión sin imagen
- HTML
- JS
<div class="ulpgcds-avatar"><div class="ulpgcds-avatar__letter">J</div></div>
<div class="ulpgcds-avatar "><div class="ulpgcds-avatar__letter ulpgcds-avatar__letter--blue">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--big"><div class="ulpgcds-avatar__letter">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--big "><div class="ulpgcds-avatar__letter ulpgcds-avatar__letter--blue">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--small"><div class="ulpgcds-avatar__letter">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--small"><div class="ulpgcds-avatar__letter ulpgcds-ulpgcds-avatar__letter--blue">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--large"><div class="ulpgcds-avatar__letter">J</div></div>
<div class="ulpgcds-avatar ulpgcds-avatar--large"><div class="ulpgcds-avatar__letter ulpgcds-avatar__letter--blue">J</div></div> Uso del componente
Los avatares se emplean principalmente para ayudar a los usuarios a reconocer y organizar visualmente comentarios en un hilo de conversación, así como para ofrecer una identidad provisional a los usuarios que no tengan disponible una imagen propia asociada a su cuenta personal.
El objetivo principal es humanizar cualquier comunicación digital, dando a los usuarios la sensación de pertenencia a un espacio privado dentro de la web de la ULPGC.
Buenas prácticas:
- Mantenga siempre la geometría del avatar.
- Si necesita tamaños mayores, asegúrese de que mantiene la misma proporción 1:1
- Las imágenes subidas pueden ser de varios tamaños, aunque se recomienda subir imágenes con una relación de aspecto 1:1, 3:4 o 2:3.
- Si un usuario no tiene o no quiere mostrar su imagen, se debe mostrar la variación del avatar con la letra inicial de su primer nombre.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-avatar | Activa la visualización del estilo para los avatares |
| .ulpgcds-avatar--small | Versión más pequeña de 32 píxeles |
| .ulpgcds-avatar--big | Versión más grande de 48 píxeles |
| .ulpgcds-avatar--large | La versión más grande de 80 píxeles |
| .ulpgcds-avatar__letter | Modificación para cuando el avatar dispone de letra |
| .ulpgcds-avatar__letter--blue | Modificación para cuando el fondo del avatar es azul |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
