Kimlik · Footer
Alt bilgi
Sayfanın sonunda kurumu, zorunlu bağlantıları ve iletişim bilgisini taşır. Kurum logosunu girdi olarak alır.
- CSS
- kararlı
- JavaScript
- gerekmiyor
- React
- kararlı
- Vue
- kararlı
Örnekler
HTML kodunu göster
<footer class="trds-alt-bilgi">
<div class="trds-kap">
<div class="trds-alt-bilgi__ust">
<div class="trds-alt-bilgi__marka">
<img class="trds-alt-bilgi__logo" src="/trds//e-devlet-isaret.png" alt="" width="64" height="64">
<div><p class="trds-alt-bilgi__kurum">e-Devlet Kapısı</p><p class="trds-alt-bilgi__ust-kurum">T.C. Cumhurbaşkanlığı Siber Güvenlik Başkanlığı kurar ve yönetir. Türksat A.Ş. işletir.</p></div>
</div>
<address class="trds-alt-bilgi__iletisim">
<p><span class="trds-alt-bilgi__iletisim-etiket">Çağrı merkezi</span><a href="tel:160">160</a></p>
<p><span class="trds-alt-bilgi__iletisim-etiket">Engelsiz çağrı merkezi</span>İşaret dili ile görüntülü görüşme</p>
</address>
</div>
<div class="trds-alt-bilgi__sutunlar">
<div><p class="trds-alt-bilgi__sutun-baslik">e-Hizmetler</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">Sık kullanılan hizmetler</a></li><li><a href="#">Yeni eklenen hizmetler</a></li><li><a href="#">Kurum hizmetleri</a></li></ul></div>
<div><p class="trds-alt-bilgi__sutun-baslik">Yardım</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">Genel yardım</a></li><li><a href="#">Sıkça sorulanlar</a></li><li><a href="#">Güvenliğiniz için</a></li></ul></div>
<div><p class="trds-alt-bilgi__sutun-baslik">Bize ulaşın</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">İletişim</a></li><li><a href="#">CİMER başvurusu</a></li></ul></div>
</div>
<div class="trds-alt-bilgi__satir">
<nav class="trds-alt-bilgi__baglantilar" aria-label="Alt bilgi bağlantıları"><a href="#">Erişilebilirlik bildirimi</a><a href="#">KVKK aydınlatma metni</a><a href="#">Çerez politikası</a></nav>
<ul class="trds-alt-bilgi__sosyal" aria-label="Sosyal medya hesapları"><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></ul>
</div>
<p class="trds-alt-bilgi__telif">© 2026 Türkiye Cumhuriyeti</p>
</div>
</footer>
HTML kodunu göster
<footer class="trds-alt-bilgi trds-alt-bilgi--koyu">
<div class="trds-kap">
<div class="trds-alt-bilgi__ust">
<div class="trds-alt-bilgi__marka">
<span class="trds-alt-bilgi__monogram" aria-hidden="true">SGK</span>
<div><p class="trds-alt-bilgi__kurum">Sosyal Güvenlik Kurumu</p><p class="trds-alt-bilgi__ust-kurum">Çalışma ve Sosyal Güvenlik Bakanlığı bağlı kuruluşudur.</p></div>
</div>
<address class="trds-alt-bilgi__iletisim">
<p><span class="trds-alt-bilgi__iletisim-etiket">Adres</span>Ziyabey Cad. No:6 06520 Balgat/Ankara</p>
<p><span class="trds-alt-bilgi__iletisim-etiket">Telefon</span><a href="tel:+903122078000">0 (312) 207 80 00</a> · Alo 170</p>
</address>
</div>
<div class="trds-alt-bilgi__satir">
<nav class="trds-alt-bilgi__baglantilar" aria-label="Alt bilgi bağlantıları"><a href="#">KVKK</a><a href="#">Aydınlatma metni</a><a href="#">Yasal uyarı</a><a href="#">Site haritası</a></nav>
</div>
<p class="trds-alt-bilgi__telif">© 2026 Sosyal Güvenlik Kurumu</p>
</div>
</footer>
HTML kodunu göster
<footer class="trds-alt-bilgi">
<div class="trds-kap">
<div class="trds-alt-bilgi__sutunlar">
<div><p class="trds-alt-bilgi__sutun-baslik">e-Hizmetler</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">Sık kullanılan hizmetler</a></li><li><a href="#">Yeni eklenen hizmetler</a></li><li><a href="#">Kurum hizmetleri</a></li></ul></div>
<div><p class="trds-alt-bilgi__sutun-baslik">Yardım</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">Genel yardım</a></li><li><a href="#">Sıkça sorulanlar</a></li><li><a href="#">Güvenliğiniz için</a></li></ul></div>
<div><p class="trds-alt-bilgi__sutun-baslik">Bize ulaşın</p><ul class="trds-alt-bilgi__sutun-liste"><li><a href="#">İletişim</a></li><li><a href="#">CİMER başvurusu</a></li></ul></div>
</div>
<div class="trds-alt-bilgi__satir">
<nav class="trds-alt-bilgi__baglantilar" aria-label="Alt bilgi bağlantıları"><a href="#">Erişilebilirlik bildirimi</a><a href="#">KVKK aydınlatma metni</a><a href="#">Çerez politikası</a></nav>
</div>
<p class="trds-alt-bilgi__telif">© 2026 Türkiye Cumhuriyeti</p>
</div>
</footer>
HTML kodunu göster
<footer class="trds-alt-bilgi">
<div class="trds-kap">
<div class="trds-alt-bilgi__satir">
<nav class="trds-alt-bilgi__baglantilar" aria-label="Alt bilgi bağlantıları">
<a href="#">Erişilebilirlik bildirimi</a>
<a href="#">KVKK aydınlatma metni</a>
<a href="#">Çerez politikası</a>
<a href="#">Kullanım koşulları</a>
</nav>
<nav class="trds-dil" aria-label="Dil seçimi">
<ul class="trds-dil__liste">
<li><span aria-current="true" lang="tr">Türkçe</span></li>
<li><a href="#" lang="en" hreflang="en">English</a></li>
</ul>
</nav>
</div>
<p class="trds-alt-bilgi__telif">© 2026 Türkiye Cumhuriyeti</p>
</div>
</footer>
Ne zaman kullanılır
- Her sayfada kullanın. Kurumsal seçenek kurum adını ve üst kurumu kendi taşır. O zaman kurum tanıtıcısı kullanılmaz. Sade seçenek tanıtıcının hemen altında durur.
- Kurumun kendi logosunu
trds-alt-bilgi__logoile verin. Logo yoksa kısa ad bir monogram olarak durur: SGK, ÖSYM. - Adres, santral ve çağrı hattı iletişim bloğundadır. Beş sütuna kadar bağlantı grubu eklenir.
- Koyu seçeneği bakanlık siteleri için vardır. Kırmızı şerit iki seçenekte de kalır.
- Erişilebilirlik bildirimi, KVKK aydınlatma metni ve çerez sayfası bağlantıları burada durur. Kurum bağlantıları tanıtıcıdadır. Bir bağlantı iki yerde durmaz.
- Dil seçici sağda durur. Telif satırı en alttadır.
Erişilebilirlik
<footer>etiketini kullanın.- Bağlantı listelerine görünür başlık verin.
- Erişilebilirlik bildirimi bağlantısını alt bilgide kolay bulunur bir yerde gösterin.
Karşılanan WCAG 2.2 ölçütleri 1.3.12.4.5
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, DK.