Avatar CSS

O que é

É o círculo com a foto do usuário no topo do painel, ao lado de um comentário, numa lista de equipe. Sem foto, ele mostra as iniciais ("BR") sobre um degradê colorido. Você escreve <span sw-avt> com as iniciais (ou uma <img> dentro) e acrescenta palavras para tamanho, cor, formato e status: sw-avt="g suc onl".

É só CSS — não precisa de JavaScript. A foto é recortada no formato do avatar sozinha, em qualquer tamanho. Todo avatar ganha um contorno da cor do fundo da página, para se destacar quando fica em cima de outro. O pontinho de status pisca devagar (igual em todo o SW Core).

Quando usar

• Menu do usuário no topo do site ou do painel.
• Comentários e depoimentos: rosto + nome.
• Quem está online num chat ou atendimento (onl, bsy, away).
• Equipe de um projeto ou participantes de um evento: pilha de rostos com "+5".

Comece aqui

1. 1

   Coloque o SW Core no <head>. O avatar é só CSS.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Com iniciais: escreva as letras dentro.

   BR

   <span sw-avt>BR</span>

3. 3

   Com foto: coloque a <img> dentro. Tamanho grande + pontinho de online:

   

   <span sw-avt="g onl"><img src="beatriz.webp" alt="Beatriz Rocha"></span>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

3. Formato e foto

Redondo por padrão. sqr deixa quadrado com canto discreto (bom para logo de empresa). A foto se recorta sozinha no formato. No código, troque o src pela sua foto.

DB

5. Pilha de avatares (sw-avt-grp)

Coloque vários avatares dentro de <div sw-avt-grp>: eles se sobrepõem. Passe o mouse — a pilha se abre. O último pode ser o "+N" com a classe sw-avt-grp-more.

AN BR CM DL +5

+12

6. Pilha "presença ao vivo" (sw-presence)

Outra pilha, mais animada: ao passar o mouse os rostos se espalham em leque. Aqui cada pessoa é um <span> simples (sem sw-avt): com <img> dentro vira foto; vazio, ganha uma cor. class="is-online" põe o pontinho verde.

+3

+8

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="flx gap-3">
  <span sw-avt="p sec">CM</span>
  <div>
    <strong>Carlos Melo</strong> <span class="t-mut t-pp">· há 2 horas</span>
    <p>Ótimo artigo! Apliquei as dicas e minha página ficou bem mais rápida.</p>
  </div>
</div>

<div class="flx f-cl gap-3">
  <div class="flx alc gap-3"><span sw-avt="onl">AN</span> Ana — <span class="t-mut">disponível</span></div>
  <div class="flx alc gap-3"><span sw-avt="bsy sec">BR</span> Bruno — <span class="t-mut">em atendimento</span></div>
  <div class="flx alc gap-3"><span sw-avt="away suc">CM</span> Carla — <span class="t-mut">volta às 14h</span></div>
</div>

<div sw-card="p">
  <div class="sw-card-bdy flx j-sb alc gap-3">
    <div><strong>Workshop de fotografia</strong><div class="t-mut t-pp">Sábado, 10h</div></div>
    <div sw-avt-grp>
      <span sw-avt>AN</span>
      <span sw-avt="sec">BR</span>
      <span sw-avt="suc">CM</span>
      <span class="sw-avt-grp-more">+18</span>
    </div>
  </div>
</div>

Precisa de quê

• swcore.min.css.
• Nenhum JavaScript.

Cuidados — erros comuns

• Mais de 2 letras não cabe bem: use as iniciais (nome + sobrenome), não o nome inteiro.
• Foto sempre com alt (o nome da pessoa). Se a foto for decorativa ao lado do nome escrito, alt="".
• Use fotos quadradas e leves (ex.: 160×160 em .webp). Foto retangular é recortada no meio.
• O "+N" do sw-avt-grp é uma classe (class="sw-avt-grp-more"), não um sw-avt.
• Dentro do sw-avt-grp use todos os avatares do mesmo tamanho: a sobreposição e o tamanho do "+N" seguem o tamanho deles (pp, p, padrão, g, gg).
• No sw-presence não use sw-avt dentro — são <span> simples.

O que ele não faz

• O leque do sw-presence tem movimento próprio só para as quatro primeiras posições.
• O sw-presence tem um tamanho só (42px) e só o status "online".
• Não gera as iniciais sozinho a partir do nome: você escreve as letras.