CSS: avatar

.instui-avatar · stable — Um avatar de usuário mostrando iniciais ou uma imagem, circular por padrão.

Por padrão a paleta colore as iniciais sobre uma superfície transparente; -has-inverse-color preenche a superfície com a cor e coloca as iniciais na cor. A variante -color-ai sempre preenche com o gradiente violeta→mar. Para um nome completo de exibição, coloque-o no conteúdo (para que permaneça na árvore de acessibilidade) e adicione data-initials="XX" para a aparência compacta — o texto real é o que o leitor de tela anuncia. Sem data-initials, conteúdo que ultrapassa apenas é cortado rigidamente (sem reticências); envolva em .name para um recorte preciso que mantenha apenas a primeira letra, ou divida em .first-name/.last-name para duas letras recortadas (qualquer metade pode ser omitida e a outra permanece centralizada).

Source: avatar.css

TIP

Aprimoramento JS — O CSS deste componente renderiza e funciona por conta própria; combine-o com @pantoken/interactions para adicionar o comportamento interativo. Veja a tabela de modificadores abaixo.

Acessibilidade

Dê a um avatar de imagem um alt significativo (o nome da pessoa), não um genérico "avatar"; para avatares apenas com iniciais, prefira conteúdo com o nome real (texto simples, data-initials, .name, ou .first-name/.last-name) em vez de letras pré-abreviadas, para que tecnologias assistivas anunciem o nome real.

Uso

@import "@pantoken/components/components.css";
@import "@pantoken/components/avatar.css";

Exemplos

<span class="instui-avatar --me-sm">LH</span>
<span class="instui-avatar -color-ai --me-sm">AI</span>
<span class="instui-avatar --me-sm" data-initials="NV">Dr. Nguyen Van Thoc</span>
<span class="instui-avatar"><span class="name">Miguel Sanchez</span></span>
<span class="instui-avatar"><span class="first-name">Miguel</span> <span class="last-name">Sanchez</span></span>

Estrutura

O avatar mostra um dos seguintes: um <img>, texto simples/data-initials, um wrapper .name, ou um par .first-name/.last-name.

.instui-avatar
  img (0..1)
  .name (0..1)
  .first-name (0..1)
  .last-name (0..1)

flowchart TD n0[".instui-avatar"]:::cssdoc-root n1("img"):::cssdoc-part n2(".name"):::cssdoc-part n3(".first-name"):::cssdoc-part n4(".last-name"):::cssdoc-part n0 -.->|0..1| n1 n0 -.->|0..1| n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores

Modificador	Descrição
.-color-accent1	Deprecated — use .-color-blue.
.-color-accent2	Deprecated — use .-color-green.
.-color-accent3	Deprecated — use .-color-red.
.-color-accent4	Deprecated — use .-color-orange.
.-color-accent5	Deprecated — use .-color-ash.
.-color-accent6	Deprecated — use .-color-grey.
.-color-ai	Cor da paleta de destaque AI.
.-color-ash	Cor da paleta Ash.
.-color-blue	Cor da paleta Blue.
.-color-green	Cor da paleta Green.
.-color-grey	Cor da paleta Grey.
.-color-orange	Cor da paleta Orange.
.-color-red	Cor da paleta Red.
.-has-inverse-color	Use a cor de texto inversa (on-dark).
.-shape-rectangle	Forma quadrada (retangular) em vez de círculo.
.-show-border	Alias — maps to .-show-border-always.
.-show-border-always	Força a borda (ring) ligada, mesmo sobre uma imagem ou um preenchimento inverso.
.-show-border-never	Força a borda (ring) desligada.
.-size-2xl	Dois tamanhos maiores.
.-size-2xs	Dois tamanhos menores.
.-size-large	Grande. Aliás em forma longa de -size-lg.
.-size-lg	Grande.
.-size-md	Médio (o padrão).
.-size-medium	Médio (o padrão). Aliás em forma longa de -size-md.
.-size-sm	Pequeno.
.-size-small	Pequeno. Aliás em forma longa de -size-sm.
.-size-x-large	Extra grande. Aliás em forma longa de -size-xl.
.-size-x-small	Extra pequeno. Aliás em forma longa de -size-xs.
.-size-xl	Extra grande.
.-size-xs	Extra pequeno.
.-size-xx-large	Dois tamanhos maiores. Aliás em forma longa de -size-2xl.
.-size-xx-small	Dois tamanhos menores. Aliás em forma longa de -size-2xs.

Partes

Parte	Descrição
.first-name	Opcional (em par com .last-name): envolve o nome dado, recortado para sua letra inicial.
.last-name	Opcional (em par com .first-name): envolve o sobrenome da família, recortado para sua letra inicial.
.name	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

Pseudo-elementos

Pseudo-elemento	Descrição
::before	—

Tokens consumidos

Token	Tipo	Valor
--instui-component-avatar-ai-bottom-gradient-color	<color>	#00828E
--instui-component-avatar-ai-top-gradient-color	<color>	#9E58BD
--instui-component-avatar-ash-background-color	<color>	LightDarklight-dark(#273540, #1C222B)
--instui-component-avatar-ash-text-color	<color>	LightDarklight-dark(#273540, #C7CACD)
--instui-component-avatar-background-color	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-avatar-blue-background-color	<color>	#2B7ABC
--instui-component-avatar-blue-text-color	<color>	LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-avatar-border-color	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-component-avatar-border-width-md	<length>	0.125rem
--instui-component-avatar-border-width-sm	<length>	0.0625rem
--instui-component-avatar-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-avatar-font-size-lg	<length>	1.25rem
--instui-component-avatar-font-size-md	<length>	1rem
--instui-component-avatar-font-size-sm	<length>	0.875rem
--instui-component-avatar-font-size-xl	<length>	1.75rem
--instui-component-avatar-font-size-xs	<length>	0.75rem
--instui-component-avatar-font-size2xl	<length>	2.5rem
--instui-component-avatar-font-size2xs	<length>	0.75rem
--instui-component-avatar-font-weight	<integer>	600
--instui-component-avatar-green-background-color	<color>	#03893D
--instui-component-avatar-green-text-color	<color>	LightDarklight-dark(#037D37, #61C378)
--instui-component-avatar-grey-background-color	<color>	LightDarklight-dark(#4A5B68, #576773)
--instui-component-avatar-grey-text-color	<color>	LightDarklight-dark(#4A5B68, #F2F4F5)
--instui-component-avatar-orange-background-color	<color>	#CF4A00
--instui-component-avatar-orange-text-color	<color>	LightDarklight-dark(#BB4200, #FF905A)
--instui-component-avatar-rectangle-radius	<length>	0.25rem
--instui-component-avatar-red-background-color	<color>	#E62429
--instui-component-avatar-red-text-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-avatar-size-lg	<length>	3.5rem
--instui-component-avatar-size-md	<length>	3rem
--instui-component-avatar-size-sm	<length>	2.5rem
--instui-component-avatar-size-xl	<length>	4rem
--instui-component-avatar-size-xs	<length>	2rem
--instui-component-avatar-size2xl	<length>	5rem
--instui-component-avatar-size2xs	<length>	1.5rem
--instui-component-avatar-text-on-color	<color>	#ffffff

Relacionado

• byline — Pode hospedar um avatar como sua figura heroica inicial.