Yerleşim · Card

Kart

Bir hizmeti veya duyuruyu başlık, açıklama ve bağlantı ile tanıtır.

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

Örnekler

Temel Canlı örnek

Emeklilik başvurusu

Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.

HTML kodunu göster

<div class="trds-kart">
  <h3 class="trds-kart__baslik"><a href="#">Emeklilik başvurusu</a></h3>
  <p class="trds-kart__ozet">Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.</p>
</div>

Ne zaman kullanılır

Hizmet listeleri ve duyuru listeleri için kullanın.
Form alanlarını kart içine koymayın.

Erişilebilirlik

Tüm kartı tıklanabilir yapmayın. Başlıktaki bağlantı tıklanır.
Kart başlıkları sayfadaki başlık düzenine uyar.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR, IE, JP, DK, DE, NO.