Kimlik · Phase banner

Aşama afişi

Hizmetin deneme aşamasında olduğunu söyler ve geri bildirim ister. Başlık çubuğunun hemen altında durur.

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

Örnekler

Beta Canlı örnek · tam genişlik

HTML kodunu göster

<div class="kiris-asama">
  <div class="kiris-kap kiris-asama__ic"><span class="kiris-etiket kiris-etiket--mavi">Beta</span><p class="kiris-asama__metin">Bu yeni bir hizmettir. <a class="kiris-link" href="#">Geri bildiriminiz</a> onu iyileştirir.</p></div>
</div>

Ne zaman kullanılır

Alfa ve beta aşamasında her sayfada kullanın.
Hizmet canlıya geçince kaldırın.

Erişilebilirlik

Etiket ve metin aynı satırdadır. Geri bildirim bağlantısı yeni sekmede açılmaz.

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

Kaynak

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

Bu bileşenin kodu depoda:

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