Referência:
https://www.gov.br/ds/components/avatar?tab=desenvolvedor
Componente utilizado para representar graficamente um usuário em ambientes virtuais. Pode apresentar-se como ilustração vetorial (avatar icônico), texto (avatar letra) e fotografia (avatar fotográfico).
HTML
<span class="br-avatar mr-3" title="Fulano da Silva"><span class="content"><i class="fas fa-user" aria-hidden="true"></i></span></span><span class="br-avatar medium mr-3" title="Fulano da Silva"><span class="content"><i class="fas fa-user" aria-hidden="true"></i></span></span><span class="br-avatar large mr-3" title="Fulano da Silva"><span class="content"><i class="fas fa-user" aria-hidden="true"></i></span></span>
HTML
<span class="br-avatar mr-3" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/1005/400" alt="Avatar"/></span></span><span class="br-avatar medium mr-3" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/287/400" alt="Avatar"/></span></span><span class="br-avatar large mr-3" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/357/400" alt="Avatar"/></span></span>
HTML
<span class="br-avatar mr-3" title="Fulano da Silva"><span class="content bg-violet-50 text-pure-0">W</span></span><span class="br-avatar medium mr-3" title="Fulano da Silva"><span class="content bg-orange-50 text-pure-0">A</span></span><span class="br-avatar large mr-3" title="Fulano da Silva"><span class="content bg-green-50 text-pure-0">H</span></span>
HTML
<style>
#avatar-dropdown-trigger {
height: auto;
padding: var(--spacing-scale-base);
}
</style>
<div>
<button class="br-sign-in" type="button" id="avatar-dropdown-trigger" data-toggle="dropdown" data-target="avatar-menu" aria-label="Avatar com dropdown"><span class="br-avatar" title="Fulano da Silva"><span class="content bg-orange-vivid-30 text-pure-0">F</span></span><span class="ml-2 text-gray-80 text-weight-regular">Olá, <span class="text-weight-semi-bold">Fulano</span></span><i class="fas fa-caret-down" aria-hidden="true"></i>
</button>
<div class="br-list" id="avatar-menu" hidden="hidden"><a class="br-item" href="javascript:void(0)">Dados pessoais</a><a class="br-item" href="javascript:void(0)">Privacidade</a><a class="br-item" href="javascript:void(0)">Notificações</a><a class="br-item" href="javascript:void(0)">Perguntas frequentes</a>
</div>
</div>
CSS
.br-avatar {
--avatar-size: var(--avatar-small);
--avatar-icon-size: var(--avatar-icon-small);
--avatar-text-size: var(--avatar-text-small);
--avatar-small: 40px;
--avatar-medium: 100px;
--avatar-large: 160px;
--avatar-icon-small: var(--icon-size-2x);
--avatar-icon-medium: var(--icon-size-5x);
--avatar-icon-large: var(--icon-size-8x);
--avatar-text-small: var(--font-size-scale-up-03);
--avatar-text-medium: var(--font-size-scale-up-07);
--avatar-text-large: var(--font-size-scale-up-11);
align-items: center;
background-color: transparent;
border: 0;
display: inline-flex;
font-size: var(--avatar-text-size);
font-weight: var(--font-weight-bold);
justify-content: center;
line-height: var(--avatar-size);
vertical-align: middle;
}
.br-avatar .content {
align-items: center;
background-color: var(--blue-10);
border-radius: 50%;
color: var(--blue-warm-20);
display: inline-flex;
font-size: var(--avatar-text-size);
height: var(--avatar-size);
justify-content: center;
overflow: hidden;
text-align: center;
text-transform: uppercase;
vertical-align: inherit;
width: var(--avatar-size);
}
.br-avatar .content img {
height: var(--avatar-size);
vertical-align: inherit;
width: var(--avatar-size);
}
.br-avatar .content .svg-inline--fa,
.br-avatar .content .fa,
.br-avatar .content .fab,
.br-avatar .content .fad,
.br-avatar .content .fal,
.br-avatar .content .far,
.br-avatar .content .fas {
--icon-size: var(--avatar-icon-size);
margin-top: 0.25em;
}
.br-avatar.is-small, .br-avatar.small, .br-avatar[small] {
--avatar-size: var(--avatar-small);
--avatar-icon-size: var(--avatar-icon-small);
--avatar-text-size: var(--avatar-text-small);
}
.br-avatar.is-medium, .br-avatar.medium, .br-avatar[medium] {
--avatar-size: var(--avatar-medium);
--avatar-icon-size: var(--avatar-icon-medium);
--avatar-text-size: var(--avatar-text-medium);
}
.br-avatar.is-large, .br-avatar.large, .br-avatar[large] {
--avatar-size: var(--avatar-large);
--avatar-icon-size: var(--avatar-icon-large);
--avatar-text-size: var(--avatar-text-large);
}
.br-avatar-action {
background: transparent;
border: 0;
}
.br-avatar-action:not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-avatar-action:focus {
outline: none;
}
.br-avatar-action.focus-visible, .br-avatar-action:focus-visible {
outline-color: var(--focus);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-avatar[data-toggle=dropdown]:focus {
outline: none;
}
.br-avatar[data-toggle=dropdown].focus-visible, .br-avatar[data-toggle=dropdown]:focus-visible {
outline-color: var(--focus);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-avatar .image,
.br-avatar .letter {
align-items: center;
background-color: var(--blue-10);
border-radius: 50%;
color: var(--blue-warm-20);
display: inline-flex;
font-size: var(--avatar-text-size);
height: var(--avatar-size);
justify-content: center;
overflow: hidden;
text-align: center;
text-transform: uppercase;
vertical-align: inherit;
width: var(--avatar-size);
}
.br-avatar .image img,
.br-avatar .letter img {
height: var(--avatar-size);
vertical-align: inherit;
width: var(--avatar-size);
}
.br-avatar .image .svg-inline--fa,
.br-avatar .image .fa,
.br-avatar .image .fab,
.br-avatar .image .fad,
.br-avatar .image .fal,
.br-avatar .image .far,
.br-avatar .image .fas,
.br-avatar .letter .svg-inline--fa,
.br-avatar .letter .fa,
.br-avatar .letter .fab,
.br-avatar .letter .fad,
.br-avatar .letter .fal,
.br-avatar .letter .far,
.br-avatar .letter .fas {
--icon-size: var(--avatar-icon-size);
margin-top: 0.25em;
}
/*# sourceMappingURL=avatar.css.map*/
Javascript
import Dropdown from '../../partial/js/behavior/dropdown'
/**
* Classe para o exemplo do comportamento dropdown
*/
class BRAvatar {
/**
* Instancia um exemplo de comportamento dropdown
* @param {string} name - Nome do componente
* @param {object} component - Referência ao objeto do DOM
*/
constructor(name, component) {
this.name = name
this.component = component
this._setBehavior()
}
/**
* Define os comportamentos do componente
* @private
*/
_setBehavior() {
this._setDropdownBehavior()
}
/**
* Define os comportamentos do dropdown
* @private
*/
_setDropdownBehavior() {
if (this.component.parentElement.dataset.toggle === 'dropdown') {
const config = {
iconToHide: 'fa-caret-up',
iconToShow: 'fa-caret-down',
trigger: this.component.parentElement,
useIcons: true,
}
const dropdown = new Dropdown(config)
dropdown.setBehavior()
}
}
}
export default BRAvatar
Atributo | Tipo | Valor Padrão | Descrição |
---|---|---|---|
class | string | br-avatar | Container do componente. |
class | string | content | Aplicado no conteúdo interno. Pode conter imagem, ícone ou letra. |
Atributo | Tipo | Valor Padrão | Descrição |
---|---|---|---|
title | string | Informa nome do usuário ao apontar o cursor | |
class | string | medium ou large | Modifica o tamanho do componente |
Usar Utilitários CSS > Cores para alterar cor de fundo e texto.
Veja exemplo de instanciação do dropdown na aba “Javascript” na sessão Código compartilhado entre exemplos.