C13 · Componentes
Avatar
Representação compacta de pessoa, equipe ou tenant. Quatro tamanhos. Fallback de iniciais. Empilhamento para grupos com '+N' acima de 5.
Tamanhos
| Tamanho | Diâmetro | Uso |
|---|---|---|
| sm | 24px | Comentários, listas densas. |
| md | 32px | Padrão em UI. |
| lg | 48px | Header de perfil. |
| xl | 64px | Card de membro destaque. |
Fallback de iniciais
Quando não há imagem, exibir iniciais (até 2 letras). Cor de fundo derivada do nome via hash, dentro da paleta neutra ou de acento.
<span class="avatar" aria-label="DJ"> <img src="/u/dj.jpg" alt="" /> <span class="initials" aria-hidden="true">DJ</span> </span>
Stacked group
Avatares empilhados com sobreposição de 30%. Acima de 5, encolher para '+N'.
| Quantidade | Apresentação |
|---|---|
| 1–5 | Todos visíveis empilhados. |
| 6+ | Primeiros 4 + '+N'. |
Acessibilidade
aria-labelsempre — iniciais são fallback visual, não rótulo.alt=''na imagem se há label externo;alt='Nome'se for único.- Cor de tom é decorativa — nunca codifique informação só nela.