İçerik · List

Liste

Madde işaretli, numaralı ve aralıklı liste biçimleri.

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

Örnekler

Üç biçim Canlı örnek

Nüfus cüzdanı
İkametgâh belgesi
Son üç aylık maaş bordrosu

e-Devlet ile giriş yapın.
Başvuru formunu doldurun.
Belgeleri yükleyin.

Başvurunuz alındıktan sonra 15 iş günü içinde değerlendirilir.
Eksik belge varsa SMS ile bilgilendirilirsiniz ve 10 gün ek süre verilir.

HTML kodunu göster

<ul class="trds-liste trds-liste--madde">
  <li>Nüfus cüzdanı</li>
  <li>İkametgâh belgesi</li>
  <li>Son üç aylık maaş bordrosu</li>
</ul>
<ol class="trds-liste trds-liste--sira">
  <li>e-Devlet ile giriş yapın.</li>
  <li>Başvuru formunu doldurun.</li>
  <li>Belgeleri yükleyin.</li>
</ol>
<ul class="trds-liste trds-liste--madde trds-liste--aralikli">
  <li>Başvurunuz alındıktan sonra 15 iş günü içinde değerlendirilir.</li>
  <li>Eksik belge varsa SMS ile bilgilendirilirsiniz ve 10 gün ek süre verilir.</li>
</ul>

Ne zaman kullanılır

Sıra önemliyse numaralı liste kullanın. Adımlar sıralıdır.
Her madde bir cümleden uzunsa aralıklı biçimi kullanın.
Tek maddelik liste yapmayın. Bir cümle yazın.

Erişilebilirlik

<ul> ve <ol> kullanılır. Ekran okuyucu madde sayısını duyurur.
Madde işareti CSS ile kaldırılırsa role="list" eklenir. Safari aksi hâlde listeyi duyurmaz.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, IE, KR, JP, NO, DE.