İçerik · Follow
Takip et
Bülten kaydı ve sosyal medya hesapları tek blokta. Alt bilginin hemen üstünde durur.
- CSS
- kararlı
- JavaScript
- gerekmiyor
- React
- kararlı
- Vue
- kararlı
Örnekler
HTML kodunu göster
<div class="kiris-takip">
<form class="kiris-takip__bulten" action="#" method="post">
<h3 class="kiris-takip__baslik">Bültene abone olun</h3>
<p class="kiris-govde">Ayda bir e-posta. İstediğiniz zaman ayrılın.</p>
<div class="kiris-alan"><label class="kiris-etiket" for="bulten-eposta">E-posta adresiniz</label><input class="kiris-girdi" id="bulten-eposta" name="eposta" type="email" autocomplete="email"></div>
<button class="kiris-button" type="submit">Abone ol</button>
</form>
<div class="kiris-takip__sosyal">
<h3 class="kiris-takip__baslik">Bizi takip edin</h3>
<ul class="kiris-paylas__liste"><li><a href="#" aria-label="X"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-twitter"/></svg></a></li><li><a href="#" aria-label="YouTube"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-youtube"/></svg></a></li><li><a href="#" aria-label="Instagram"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-instagram"/></svg></a></li><li><a href="#" aria-label="Facebook"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-facebook"/></svg></a></li></ul>
</div>
</div>
Ne zaman kullanılır
- Kurumun bir bülteni varsa kullanın.
- Sosyal hesaplar alt bilgide zaten varsa burada yinelemeyin.
Erişilebilirlik
- E-posta alanı etiket taşır. Düğme metni "Abone ol" olur.
- Sosyal bağlantılar
aria-labelile platform adını söyler.
Karşılanan WCAG 2.2 ölçütleri 1.3.12.4.4
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FR, CH.
Bu bileşenin kodu depoda:
- Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
- CSS katmanları,
kiris-followile başlayan sınıflar