Geri bildirim · Notification banner

Bildirim afişi

Sayfanın en üstünde önemli veya acil bir duyuru gösterir.

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

Örnekler

Acil Canlı örnek

Önemli

Sistem bakımı nedeniyle 14 Mart 02:00 ile 05:00 arasında hizmet verilmeyecektir.

HTML kodunu göster

<div class="trds-afis trds-afis--acil" role="region" aria-labelledby="afis-baslik">
  <h2 class="trds-afis__baslik" id="afis-baslik">Önemli</h2>
  <p>Sistem bakımı nedeniyle 14 Mart 02:00 ile 05:00 arasında hizmet verilmeyecektir.</p>
</div>

Ne zaman kullanılır

Hizmet kesintisi veya acil durum duyurusu için kullanın.
Sayfada en çok bir tane bulunur.

Erişilebilirlik

Başlık bir <h2> öğesidir.
Acil durum afişi kırmızı zemin ve beyaz metin kullanır. Kontrast oranı 7 üzerindedir.

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

Kaynak

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