M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Kart card

bilinen diğer adları card · içerik kartı · ürün kartı

Böyle diyorsan: "kutucuk içinde ürün" · "görselli kutular" → bunun adı kart.

Görsel + başlık + aksiyonu tek pakette toplayan kutu; ızgarada dizilir.

Kart, birbirine ait bilgileri tek bir yüzeyde toplayan kaptır: görsel, başlık, açıklama, eylem. Görünüşü kolay, doğru yapması zordur ve zorluğun kaynağı tek bir sorudur: KARTIN TAMAMI TIKLANABİLİR Mİ? Tamamı tıklanabilir olsun istiyorsan içine ikinci bir buton koyamazsın — iç içe tıklanabilir öğe hem geçersiz yapıdır hem kullanıcının hangi eylemi tetiklediğini belirsizleştirir. Yaygın ve doğru çözüm şudur: kartın içinde tek bir gerçek bağlantı bulunur (başlık), o bağlantının tıklama alanı görünmez bir katmanla kart yüzeyine yayılır, diğer eylemler o katmanın üstünde kalır. İkinci mesele ızgaradır: kartların yüksekliği içerikle değişirse ızgara tırtıklı görünür; görsel oranını ve metin satır sayısını sabitlemek bunu çözer.

Kapsam: Bu madde içerik kabını kapsar. Sayfanın en üstündeki büyük tanıtım alanı Vitrin, tablo satırı biçimindeki liste ise Tablo maddesindedir — kart, tablo verisinin mobil karşılığı olarak da kullanılır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
4:3 görsel
Ürün adı · ₺249
▸ döngü kendiliğinden oynuyor: kilit + spinner + onay
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Ürünler için card grid kur: her kartta 4:3 sabit oranlı görsel, başlık + fiyat, en çok 2 satır açıklama (fazlası üç noktayla kısalsın), altta tam genişlik 'Sepete ekle' butonu. Kartın tamamı ürün sayfasına link olsun ama buton ayrı çalışsın. Masaüstünde 3 sütun, tablette 2, mobilde 1; butonlar tüm kartlarda aynı hizada dursun.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Kart ızgaram bozuk; şu klasikleri sırayla ele: (1) görseller farklı oranlarda geldiği için satır yükseklikleri zıplıyor (aspect-ratio yok); (2) uzun başlık/açıklama taşıyor (satır sınırı yok); (3) kart-linki ile buton iç içe link olmuş, tıklamalar çakışıyor; (4) gövde esnemediği için butonlar farklı hizada; (5) hover efekti dokunmatikte takılı kalıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Görsel alanıaspect-ratio: 4/3

    Sabit oranlı üst bölge — oran sabitlenmezse farklı boyutlu görseller ızgarayı zıplatır.

  • 2Başlık + metatitle

    Ürün adı ve fiyat/tarih gibi tek satırlık kimlik bilgisi; uzunsa üç noktayla kısalır.

  • 3Gövdeline-clamp

    Kısa açıklama; satır sayısı sınırlanır ki tüm kartlar aynı boyda kalsın.

  • 4Aksiyon satırıbuton/link

    Alttaki buton; kartın geneli linkken butonun ayrı tıklanabilmesi klasik incelik ister.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormalyüzey + içerik

    Kart durur. Yüzeyi neyin ayırdığı belli olmalı: gölge, kenarlık ya da zemin farkı — üçü de yoksa kart değil sadece bir metin bloğudur.

  • BHover / odak:hover, :focus-within

    Tıklanabilir kart geri bildirim verir. Odak durumu da kartın tamamında görünmeli (:focus-within), yalnız içindeki linkte değil.

  • CYükleniyoriskelet

    Veri yolda. İskelet kartın GERÇEK ölçüsünde olmalı; tutmazsa ızgara içerik gelince baştan dizilir.

  • DSeçiliaria-pressed / checkbox

    Kart bir seçim öğesiyse durumu bildirilmeli. Yalnız kenarlık rengi değiştirmek ekran okuyucuya bir şey söylemez.

  • ETaşan içerikline-clamp

    Uzun başlık ya da açıklama. Satır sayısını sınırla ama tamamen gizlediğin bilgiye başka bir yerden ulaşılabilsin.

KODDAKİ ADLARI
CSSaspect-ratio: 4 / 3görsel oranını sabitler
CSS-webkit-line-clamp: 2açıklamayı 2 satırla sınırlar
CSSgrid + minmax()duyarlı kart ızgarası
ERİŞİLEBİLİRLİK & SIK HATA
  • İç içe tıklanabilir öğe koyma. Kartın tamamı tıklanacaksa tek bir gerçek bağlantı olsun ve alanı görünmez bir katmanla yayılsın; ikinci eylem gerekiyorsa o katmanın ÜSTÜNDE dursun.
  • Bağlantı metni tek başına anlamlı olsun (WCAG 2.4.4). 'Devamını oku' diye on bağlantı, ekran okuyucuda bağlantı listesine bakan kullanıcı için hiçbir şey ifade etmez — başlığın kendisi bağlantı olmalı.
  • Odağı kartın tamamında göster (:focus-within); yalnız minik bağlantıda beliren odak halkası klavye kullanıcısına nerede olduğunu söylemez.
  • Görselin alt metnini içeriğe göre yaz; kart görseli dekoratifse alt="" bırak, bilgi taşıyorsa anlat.
  • Kart bir ızgaradaysa yapıyı liste olarak işaretle (<ul>/<li>); ekran okuyucu kaç kart olduğunu söyleyebilsin.
SIK KARIŞTIRILANLAR

Tablodan farkı. Kart TEK BİR ŞEYİ bütün olarak tanıtır; tablo çok sayıda şeyi aynı sütunlarda KARŞILAŞTIRIR. Karar sorusu: kullanıcı bu kayıtları birbiriyle kıyaslayacak mı? Kıyaslayacaksa tablo doğrudur, çünkü aynı bilgi hep aynı hizada durur. Kartlarda her kayıt kendi düzenini kurar ve göz kıyaslamak için satır satır gezmek zorunda kalır.

Tablo sayfasına git →

Vitrinden farkı. Kart bir LİSTENİN üyesidir ve benzerleriyle birlikte anlam kazanır; vitrin sayfada TEKTİR ve tek bir mesajı taşır. Kartı vitrin gibi büyütmek listenin ritmini bozar; vitrini kart gibi çoğaltmak ise hiçbirinin öne çıkmaması demektir.

Vitrin sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Tablo tableVitrin heroİskelet yükleme skeletonAvatar grubu avatar group

AYNI AİLEDE · İÇERIK VE YERLEŞIM