Dados

Avatar

Uma representação compacta de uma pessoa ou conta.

ALBCMC

Exemplo didático · Representação visual do padrão

Quando usar

Identificar pessoas em listas, comentários e conversas.

Cuidados e acessibilidade

Quando o nome já aparece ao lado, a imagem pode ser decorativa para evitar repetição.

Partes e comportamento

Representação visual, dimensões estáveis e alternativa apropriada.

Não confunda

Um ícone genérico de pessoa não identifica sozinho um usuário específico.

Exemplo de código

<!-- Com o nome já visível, a imagem pode ser decorativa. -->
<img src="/ana.jpg" alt="" width="40" height="40">
<span>Ana Lima</span>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Avatar (Avatar) em português do Brasil. Uma representação compacta de uma pessoa ou conta. Contexto de uso: Identificar pessoas em listas, comentários e conversas. Estrutura: Representação visual, dimensões estáveis e alternativa apropriada. Referência técnica: <img alt>. Requisito: Quando o nome já aparece ao lado, a imagem pode ser decorativa para evitar repetição. Considere também: Um ícone genérico de pessoa não identifica sozinho um usuário específico. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗