Contenido

Avatares

Representa a una persona con sus iniciales dentro de un círculo. Se usa en listados de usuarios, comentarios o cabeceras de cuenta.

Uso

<vadavo-avatar> recibe las iniciales (una o dos letras) en el atributo initials. El tamaño estándar es de 44px y se ajusta con size: small (32px) o large (56px).

<vadavo-avatar size="small" initials="AG"></vadavo-avatar>
<vadavo-avatar initials="AG"></vadavo-avatar>
<vadavo-avatar size="large" initials="AG"></vadavo-avatar>

El color deriva de las iniciales

Sin color propio, el avatar deriva su fondo de las iniciales, dentro de los verdes de marca: las mismas iniciales dan siempre el mismo color, así que una persona se ve igual en toda la aplicación. Darle otro es redefinir --avatar--background--box.

<vadavo-avatar initials="AG"></vadavo-avatar>
<vadavo-avatar initials="ML"></vadavo-avatar>
<vadavo-avatar initials="JR"></vadavo-avatar>
<vadavo-avatar initials="CM"></vadavo-avatar>
<vadavo-avatar initials="PS"></vadavo-avatar>

Grupos

<vadavo-avatar-group> solapa los avatares y les añade un borde a juego con la superficie para separarlos. El atributo total es el número de personas del grupo: si son más que los avatares que recibe, el grupo cierra la fila con uno más que lleva el recuento de los que no muestra.

<vadavo-avatar-group total="6">
    <vadavo-avatar initials="AG"></vadavo-avatar>
    <vadavo-avatar initials="ML"></vadavo-avatar>
    <vadavo-avatar initials="JR"></vadavo-avatar>
    <vadavo-avatar initials="CM"></vadavo-avatar>
</vadavo-avatar-group>

Tokens semánticos

TokenQué es
--avatar--size--boxEl ancho y el alto del avatar.
--avatar--font-size--initialsEl tamaño de letra de las iniciales.
--avatar--background--boxEl color de fondo del avatar. Si no se define, el avatar deriva uno de sus iniciales.
--avatar--color--initialsEl color de las iniciales.
--avatar-group--border-width--ringEl grosor del anillo que separa cada avatar del anterior cuando van apilados en un grupo.
--avatar-group--border-style--ringEl tipo (border-style) de ese anillo.