İçerik · Callout

Bilgi kutusu

Başlıklı bir bilgi kutusu. Bir durum bildirmez, bir bilgiyi öne çıkarır.

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

Örnekler

Temel Canlı örnek

Son gün 31 Mart

Yıllık gelir vergisi beyannamesini 31 Mart 2026 Salı 23:59’a kadar verin. Ücret yoktur.

HTML kodunu göster

<div class="trds-bilgi-kutusu">
  <h3 class="trds-bilgi-kutusu__baslik"><svg class="trds-simge" aria-hidden="true"><use href="#edk-information"/></svg> Son gün 31 Mart</h3>
  <p class="trds-govde trds-u-alt-0">Yıllık gelir vergisi beyannamesini 31 Mart 2026 Salı 23:59’a kadar verin. Ücret yoktur.</p>
</div>

Ne zaman kullanılır

Bir sayfanın en önemli bilgisini, örneğin son günü veya ücreti, ayrı bir kutuda vermek için kullanın.
Hata veya başarı için uyarı bileşeni kullanın.

Erişilebilirlik

Başlık bir başlık ögesidir ve sayfa sırasına uyar.
Simge süstür.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FR, US, IT, NL, JP.