Yerleşim · Tile

Karo

Bir konuya giden büyük bağlantı kutusu. Simge, başlık ve bir cümle. Kartın bağlantı olan hali.

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

Örnekler

Üç karo Canlı örnek

EmeklilikNe zaman emekli olurum, başvuru, maaş. SağlıkProvizyon, rapor, ilaç. İşverenBildirge, prim, teşvik.

HTML kodunu göster

<div class="trds-kart-izgara trds-kart-izgara--3 trds-u-ust-0 trds-u-alt-0">
  <a class="trds-karo" href="#"><span class="trds-karo__simge"><svg class="trds-simge" aria-hidden="true"><use href="#edk-socialsecurity"/></svg></span><span class="trds-karo__baslik">Emeklilik</span><span class="trds-karo__aciklama">Ne zaman emekli olurum, başvuru, maaş.</span></a>
  <a class="trds-karo" href="#"><span class="trds-karo__simge"><svg class="trds-simge" aria-hidden="true"><use href="#edk-health"/></svg></span><span class="trds-karo__baslik">Sağlık</span><span class="trds-karo__aciklama">Provizyon, rapor, ilaç.</span></a>
  <a class="trds-karo" href="#"><span class="trds-karo__simge"><svg class="trds-simge" aria-hidden="true"><use href="#edk-business"/></svg></span><span class="trds-karo__baslik">İşveren</span><span class="trds-karo__aciklama">Bildirge, prim, teşvik.</span></a>
</div>

Ne zaman kullanılır

Ana sayfada üç ile altı ana konu için kullanın.
Bir kutuda birden çok bağlantı gerekiyorsa kart kullanın.

Erişilebilirlik

Karonun tamamı tek bir bağlantıdır. Bağlantı metni başlıktır.
Simge süstür.

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

Kaynak

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