Avatars
Avatares circulares com borda brutalista: suporte a imagem, iniciais, indicador de status e agrupamento empilhado. 4 tamanhos disponiveis.
Tamanhos
SM (32px) / MD (40px) / LG (56px) / XL (80px)
A
BC
CD
DR
HTML
<div class="canta-avatar canta-avatar--sm">
<span class="canta-avatar__initials">A</span>
</div>
<div class="canta-avatar canta-avatar--md">
<span class="canta-avatar__initials">BC</span>
</div>
<div class="canta-avatar canta-avatar--lg">
<span class="canta-avatar__initials">CD</span>
</div>
<div class="canta-avatar canta-avatar--xl">
<span class="canta-avatar__initials">DR</span>
</div>Com Imagem
Avatar com foto
HTML
<div class="canta-avatar canta-avatar--lg">
<img src="foto-usuario.jpg" alt="Nome do usuario">
</div>Com Iniciais
Fallback quando nao ha foto
AC
BL
CD
DS
HTML
<!-- Iniciais com fundo padrao -->
<div class="canta-avatar canta-avatar--md">
<span class="canta-avatar__initials">AC</span>
</div>
<!-- Iniciais com cor customizada -->
<div class="canta-avatar canta-avatar--md" style="background-color: #0250f2; border-color: #0250f2;">
<span class="canta-avatar__initials" style="color: #fff;">BL</span>
</div>Indicador de Status
Online / Offline / Busy
ON
OF
BU
HTML
<!-- Online (verde) -->
<div class="canta-avatar canta-avatar--md canta-avatar--status canta-avatar--online">
<span class="canta-avatar__initials">ON</span>
</div>
<!-- Offline (cinza) -->
<div class="canta-avatar canta-avatar--md canta-avatar--status canta-avatar--offline">
<span class="canta-avatar__initials">OF</span>
</div>
<!-- Busy (vermelho) -->
<div class="canta-avatar canta-avatar--md canta-avatar--status canta-avatar--busy">
<span class="canta-avatar__initials">BU</span>
</div>Avatar Group (Empilhado)
Grupo de avatares sobrepostos
+3
Grupo grande
HTML
<div class="canta-avatar-group">
<div class="canta-avatar canta-avatar--md">
<img src="usuario1.jpg" alt="">
</div>
<div class="canta-avatar canta-avatar--md">
<img src="usuario2.jpg" alt="">
</div>
<div class="canta-avatar canta-avatar--md">
<img src="usuario3.jpg" alt="">
</div>
<!-- Contador de extras -->
<div class="canta-avatar canta-avatar--md" style="background-color: #000; border-color: #000;">
<span class="canta-avatar__initials" style="color: #fff;">+3</span>
</div>
</div>API
| Classe | Descricao |
|---|---|
.canta-avatar | Classe base (inline-flex, circular, borda 2px preta, fundo #E5E5E5) |
.canta-avatar--sm | Tamanho 32x32px |
.canta-avatar--md | Tamanho 40x40px (padrao) |
.canta-avatar--lg | Tamanho 56x56px |
.canta-avatar--xl | Tamanho 80x80px |
.canta-avatar img | Imagem do avatar (object-fit cover) |
.canta-avatar__initials | Texto de iniciais (Montserrat bold uppercase) |
.canta-avatar--status | Habilita indicador de status (dot via ::after) |
.canta-avatar--online | Status online (dot verde) |
.canta-avatar--offline | Status offline (dot cinza) |
.canta-avatar--busy | Status ocupado (dot vermelho) |
.canta-avatar-group | Container para empilhar avatares (margin negativa) |