İçerik · Description list

Tanım listesi

Terim ve karşılık çiftlerini gösterir. Düzenleme bağlantısı yoktur, o özet listesindedir.

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

Örnekler

Temel Canlı örnek

Başvuru numarası: 2026-004512
Başvuru tarihi: 12.03.2026
Durum: İnceleniyor

HTML kodunu göster

<dl class="trds-tanim">
  <div class="trds-tanim__satir"><dt>Başvuru numarası</dt><dd>2026-004512</dd></div>
  <div class="trds-tanim__satir"><dt>Başvuru tarihi</dt><dd>12.03.2026</dd></div>
  <div class="trds-tanim__satir"><dt>Durum</dt><dd><span class="trds-etiket trds-etiket--mavi">İnceleniyor</span></dd></div>
</dl>

Ne zaman kullanılır

Başvuru numarası ve tarihi gibi salt okunur bilgi çiftleri için kullanın.
Kullanıcının düzenleyeceği bilgi için özet listesi kullanın.

Erişilebilirlik

<dl>, <dt> ve <dd> kullanılır.
Bir terim birden çok karşılık taşıyabilir. Her biri ayrı <dd> olur.

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

Kaynak

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