Yerleşim · Icon card

Simge kartı

Bir portalın ana bölümlerine giden büyük simgeli bağlantı. e-Devlet’in beş temel işlevi bu kalıptadır.

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

Örnekler

Beş bölüm Canlı örnek

e-Hizmetler

Sorgulama, başvuru ve ödeme hizmetleri.

Kurumlar

Resmî kurumların hizmetleri ve iletişim bilgileri.

Belediyeler

Belediyelerin iletişim bilgileri ve hizmetleri.

HTML kodunu göster

<div class="kiris-izgara">
  <a class="kiris-sutun kiris-sutun--4 kiris-simge-kart" href="#"><span class="kiris-simge-kart__simge"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-eservice"/></svg></span><span class="kiris-simge-kart__ad">e-Hizmetler</span><p class="kiris-simge-kart__aciklama">Sorgulama, başvuru ve ödeme hizmetleri.</p></a>
  <a class="kiris-sutun kiris-sutun--4 kiris-simge-kart" href="#"><span class="kiris-simge-kart__simge"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-agency"/></svg></span><span class="kiris-simge-kart__ad">Kurumlar</span><p class="kiris-simge-kart__aciklama">Resmî kurumların hizmetleri ve iletişim bilgileri.</p></a>
  <a class="kiris-sutun kiris-sutun--4 kiris-simge-kart" href="#"><span class="kiris-simge-kart__simge"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-municipality"/></svg></span><span class="kiris-simge-kart__ad">Belediyeler</span><p class="kiris-simge-kart__aciklama">Belediyelerin iletişim bilgileri ve hizmetleri.</p></a>
</div>

Ne zaman kullanılır

Ana sayfada üç ile altı ana bölüm için kullanın.
Simge e-Devlet resmî setinden seçilir. Yeni simge çizilmez.

Erişilebilirlik

Kartın tamamı tek bir bağlantıdır. Simge süstür ve aria-hidden taşır.
Ad bağlantı metnidir. Açıklama kısa bir cümledir.

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

Kaynak

Bu bileşenin karşılığı hiçbir yabancı tasarım sisteminde yok.

Bu bileşenin kodu depoda:

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