İçerik · Avatar

Avatar

Bir kişiyi veya kurumu fotoğraf ya da baş harflerle gösterir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Baş harf ve yığın Canlı örnek

HTML kodunu göster

<div class="trds-u-satir">
  <span class="trds-avatar" aria-hidden="true">AY</span>
  <span class="trds-avatar trds-avatar--buyuk" aria-hidden="true">SGK</span>
  <div class="trds-avatar-yigini" aria-label="Görevli 7 kişi">
    <span class="trds-avatar" aria-hidden="true">AY</span><span class="trds-avatar" aria-hidden="true">MK</span><span class="trds-avatar" aria-hidden="true">ZD</span><span class="trds-avatar trds-avatar--sayi">+4</span>
  </div>
</div>

Ne zaman kullanılır

Yorum, mesaj ve görev listesinde kişiyi göstermek için kullanın.
Fotoğraf yoksa baş harfler durur. Rastgele renk kullanmayın, tek renk vardır.

Erişilebilirlik

Fotoğraf alt olarak kişinin adını taşır. Baş harfler aria-hidden taşır, ad yanında metin olarak durur.
Yığın en çok beş avatar gösterir. Fazlası "+12" olarak yazılır.

Karşılanan WCAG 2.2 ölçütleri 1.1.1

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NL, NO, IT, BR, CH.