SWCore / CSS / Avatar

Avatar CSS

Foto ou iniciais de usuário, redondo por padrão, com 4 tamanhos, cores em degradê, status ao vivo e pilha em leque.

O que é

100% CSS — mostra uma <img> ou as iniciais do usuário num círculo (ou quadrado, com sqr). Sem foto, o fundo vira um degradê colorido pela cor semântica escolhida.

Como funciona

Sem módulo JS — puro CSS. border-radius:50% por padrão; a imagem interna herda o border-radius do pai (inherit) pra recortar certo em qualquer tamanho/forma. O pontinho de status é um ::after; [sw-avt-grp] sobrepõe os avatares e abre em leque no :hover.

Exemplos

Tamanhos e iniciais Ao vivo
SW
SW
SW
SW
SW
<div sw-avt="g">SW</div>
<div sw-avt="sqr suc">SW</div> <!-- quadrado, cor de sucesso -->
<div sw-avt><img src="/foto.jpg" alt=""></div> <!-- com foto -->
Status ao vivo — onl, bsy, away, off Ao vivo
ON BZ AW OF 
<span sw-avt="onl">online</span>
<span sw-avt="bsy">ocupado</span>
<span sw-avt="away">ausente</span>
<span sw-avt="off">offline</span>
Pilha de avatares — [sw-avt-grp] (passe o mouse: abre em leque) Ao vivo
A B C D +5 
<div sw-avt-grp>
  <span sw-avt><img src="/1.jpg" alt=""></span>
  <span sw-avt><img src="/2.jpg" alt=""></span>
  <span class="sw-avt-grp-more">+5</span>
</div>
Presence stack — [sw-presence] (variante independente) Ao vivo
ABC+3 
<!-- um <span> por pessoa — <img> dentro vira foto, vazio cai na cor -->
<span sw-presence aria-label="Presença ao vivo">
  <span><img src="/1.jpg" alt=""></span>
  <span><img src="/2.jpg" alt=""></span>
  <span class="is-online"><img src="/3.jpg" alt=""></span>
  <span class="sw-presence-more">+8</span>
</span>
<!-- .is-online = pontinho verde pulsando · último span = "+N" -->

Atributos

Nenhum.

Variantes

sw-avt (sem valor)
redondo, tamanho médio
sqr
quadrado com cantos levemente arredondados
pp · p · (padrão) · g · gg
tamanhos, do menor ao maior
sec · suc · ale · err · inf
cor de fundo (degradê) quando não tem foto
onl · bsy · away · off
pontinho de status no canto — online / ocupado / ausente / offline
[sw-avt-grp] + .sw-avt-grp-more
pilha de avatares sobrepostos, abre em leque no hover — o último item é o "+N"
[sw-presence] + .is-online + .sw-presence-more
variante de pilha independente do avatar — vazio cai na cor, .is-online pisca verde

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorBotão Próximo →Badge