İçerik · Icon list

Simgeli liste

Her maddesi bir simge ile başlayan liste. Gerekli belgeler, koşullar.

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

Örnekler

Gerekli belgeler Canlı örnek

T.C. kimlik kartı
İkametgâh belgesi, son 30 gün içinde alınmış
Bir e-posta adresi

HTML kodunu göster

<ul class="kiris-simgeli-liste">
  <li><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-identity"/></svg><span>T.C. kimlik kartı</span></li>
  <li><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-home"/></svg><span>İkametgâh belgesi, son 30 gün içinde alınmış</span></li>
  <li><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-mail"/></svg><span>Bir e-posta adresi</span></li>
</ul>

Ne zaman kullanılır

Koşul listesi ve belge listesi için kullanın.
Simge maddeyi anlatır, süslemez. Her maddede aynı simge de olabilir.

Erişilebilirlik

Simge süstür. Madde metni tek başına anlaşılır.
Onay işareti "tamam" anlamına gelir. Anlam yalnız simgeyle verilmez, metin de söyler.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 1.4.1

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-icon-list ile başlayan sınıflar