Exibição

Avatar

Inicial em círculo, em quatro tamanhos e seis cores de série, sozinho ou em grupo.

só CSS

Exemplo

A C L A B +4

<span class="u-avatar u-avatar--sm">A</span>
<span class="u-avatar" data-c="1">C</span>
<span class="u-avatar u-avatar--lg" data-c="2">L</span>
<span class="u-avatars">
  <span class="u-avatar" data-c="1">A</span>
  <span class="u-avatar" data-c="3">B</span>
  <span class="u-avatar" data-c="6">+4</span>
</span>

Instalação

Avatar vem no pacote completo, em unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classes e variantes

Classe	O que faz
`u-avatar`	36px.
`u-avatar--sm, --lg, --xl`	28, 48 e 92px.
`data-c="1" a "6"`	Cor da série. Sem `data-c`, fica neutro.
`u-avatars`	Grupo sobreposto, com aro na cor do card.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
texto	conteúdo	A inicial é lida como texto. Num grupo, ponha o nome completo num `aria-label` do grupo ou ao lado.