Produto
PRODUTO
Avatar
O avatar, sempre colocado no shape arredondado, é utilizado para identificar usuários dentro da plataforma. Para o caso do usuário logado, o avatar pode acompanhar a indicação de notificações relacionadas à conta — tais como mensagens ou atualizações.
Anatomia
Normal 
Notificação
4
4
Placeholder 
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="avatar">
<img src="/img/avatar-default.png">
<span class="notification">
4
</span>
</div>
SASS Exibir código
Copiar código
Exibir código
.avatar{
position: relative;
max-width: 100px;
text-align: center;
.notification{
background-color: #f7744a;
min-width: 24px;
height: 24px;
position: absolute;
border-radius: 15px;
color: #fff;
text-align: center;
box-sizing: border-box;
padding-top: 2px;
right: 2px;
}
}