Sistema de diseño
User info avatar
Componente de imagen de usuario. Es un elemento de interfaz que permite mostrar y gestionar las imágenes asociadas a los perfiles de los usuarios.
Figma
Storybook
AEM
Overview
Permite a nuestros usuarios mostrar la imagen que les representa en los perfiles de los productos.
Puede incluir enlaces o acciones que permitan a los usuarios acceder directamente a sus perfiles al hacer clic en la imagen.
Accesibilidad
Se implementa considerando prácticas de accesibilidad, incluyendo el uso adecuado de atributos alt y el cumplimiento de estándares para que las imágenes sean accesibles para usuarios con discapacidades.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Según el tipo de plataforma o el diseño de la molécula que contiene este componente tenemos distintas variantes o versiones del mismo.
Link
Enlace de acceso a un área de usuario.
Informative
Tiene más peso visual ya que consta de más elementos en su composición: Imagen, nombre del usuario y cargo o información adicional.
Actionable
Variante pensada para gestionar listados de usuarios.
Variantes del Avatar
Nombre
Descripción / Uso
Ejemplo
User Picture
Contamos con la imagen del usuario y podemos mostrarla.
Icon
En lugar de foto necesitamos añadir un icono que acompañe al nombre del usuario.
Selected
En caso de ser un elemento seleccionable se mostrará así en su estado activo.
Iniciales
Cuando no tenemos foto solo aparecen las inciales del usuario.
Actionable
Avatar con estado accionable.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Uso del color en el avatar
En aplicaciones que muestren multitud de usuarios, y desde diseño se decida que puede haber distintos colores en los disferentes usuarios, aplicaremos en orden los colores de Data para el Background cuando se utilice tipo Default del avatar.
A partir de 8 usuarios, se repetirán de forma aleatoria. El color principal es el naranja.
Comportamiento de las iniciales
Utilizaremos la primera letra del nombre y apellido para asignar la letra al avatar. En caso de que no haya apellido, se tomarán los dos primeros caracteres del nombre. Se ignoran los caracteres especiales.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes