Kimlik · Logo lockup

Kurum logosu TR

Kurumun kendi logosu, tek bir bağlantıda ve sabit yükseklikte. Logosu olmayan kurum için bayrak ve ad kilidi.

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

Örnekler

Kurumun kendi logosu Canlı örnek

HTML kodunu göster

<div class="trds-logo-dizisi">
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/kurumlar/saglik-bakanligi-kirmizi.svg" alt="T.C. Sağlık Bakanlığı" width="1448" height="490"></a>
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/kurumlar/sgk.svg" alt="Sosyal Güvenlik Kurumu" width="150" height="73"></a>
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/e-devlet-isaret.png" alt="e-Devlet Kapısı" width="196" height="196"></a>
</div>

Koyu zeminde beyaz sürüm Canlı örnek

HTML kodunu göster

<div class="trds-logo-dizisi trds-logo-dizisi--koyu">
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/kurumlar/e-devlet-kapisi-beyaz.svg" alt="türkiye.gov.tr" width="250" height="60"></a>
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/kurumlar/sgk-beyaz.svg" alt="Sosyal Güvenlik Kurumu" width="1303" height="640"></a>
  <a class="trds-logo" href="/"><img class="trds-logo__gorsel" src="/trds/kurumlar/saglik-bakanligi-beyaz.svg" alt="T.C. Sağlık Bakanlığı" width="1448" height="490"></a>
</div>

Bayrak ve ad kilidi Canlı örnek

T.C. Sağlık Bakanlığı

HTML kodunu göster

<a class="trds-logo" href="/">
  <img class="trds-logo__arma" src="/trds/turk-bayragi.svg" alt="" width="48" height="32">
  <span class="trds-logo__metin">
    <span class="trds-logo__ust">T.C.</span>
    <span class="trds-logo__ad">Sağlık Bakanlığı</span>
  </span>
</a>

Bağlı kuruluş Canlı örnek

T.C. Çalışma ve Sosyal Güvenlik Bakanlığı Sosyal Güvenlik Kurumu

HTML kodunu göster

<a class="trds-logo" href="/">
  <img class="trds-logo__arma" src="/trds/turk-bayragi.svg" alt="" width="48" height="32">
  <span class="trds-logo__metin">
    <span class="trds-logo__ust">T.C. Çalışma ve Sosyal Güvenlik Bakanlığı</span>
    <span class="trds-logo__ad">Sosyal Güvenlik Kurumu</span>
  </span>
</a>

Ne zaman kullanılır

Her sayfada, aynı yerde kullanın. Ana sayfaya bağlanır.
Kurumun resmî logosu varsa onu kullanın. Dosya kimlik paketinde durur ve yalnız o kurumu gösterir.
Logo yoksa bayrak ve ad kilidini kullanın. Arma ile adın oranını değiştirmeyin.
Koyu zeminde beyaz sürüm, açık zeminde renkli sürüm durur. Logoyu yeniden boyamayın.

Erişilebilirlik

Logo görseli kurum adını alt olarak taşır. Bağlantı metni odur.
Bayrak ve ad kilidinde bayrak boş alt taşır. Kurum adı metindir, ekran okuyucu onu okur.
Üst satır "T.C." her zaman yazılır. Bu bir kimlik işaretidir.

Karşılanan WCAG 2.2 ölçütleri 1.1.1 2.4.4

Neden bu bileşen var

Kurumun işaretini ve adını aynı düzende gösterir. Logo boyutu, boşlukları ve açık veya koyu zemin seçeneklerini ortak kurallarla belirler.

Kaynak

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