İç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="trds-takip">
<form class="trds-takip__bulten" action="#" method="post">
<h3 class="trds-takip__baslik">Bültene abone olun</h3>
<p class="trds-govde">Ayda bir e-posta. İstediğiniz zaman ayrılın.</p>
<div class="trds-alan"><label class="trds-etiket" for="bulten-eposta">E-posta adresiniz</label><input class="trds-girdi" id="bulten-eposta" name="eposta" type="email" autocomplete="email"></div>
<button class="trds-button" type="submit">Abone ol</button>
</form>
<div class="trds-takip__sosyal">
<h3 class="trds-takip__baslik">Bizi takip edin</h3>
<ul class="trds-paylas__liste"><li><a href="#" aria-label="X"><svg class="trds-simge" aria-hidden="true"><use href="#edk-twitter"/></svg></a></li><li><a href="#" aria-label="YouTube"><svg class="trds-simge" aria-hidden="true"><use href="#edk-youtube"/></svg></a></li><li><a href="#" aria-label="Instagram"><svg class="trds-simge" aria-hidden="true"><use href="#edk-instagram3"/></svg></a></li><li><a href="#" aria-label="Facebook"><svg class="trds-simge" aria-hidden="true"><use href="#edk-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.