Kart arayüzü ve görsel bloklar

1) Neden kartları

• hızla tarandı,
• Bir ana CTA verir,
• Farklı kaplara/sütunlara uyum sağlar,
• Davranışta öngörülebilir (hover, press, focus, context menu).

2) Bir kartın anatomisi

1. Medya bölgesi (kapak/logo/önizleme, 16: 9/4: 3/1: 1).

2. Başlık (1-2 kesik çizgi).

3. Meta veriler (altyazı, etiket/kategori, sağlayıcı, zaman).

4. Durum rozetleri (yeni, canlı, promosyon, derecelendirme).

5. CTA/hızlı eylemler (düğme veya simgeler).

6. İkincil metin (kısa, 2-3 max satır).

7. Kontroller (sık kullanılanlar,... bağlam).

Hiyerarşi: Medya- üstbilgi - CTA - meta - ikincil. Yıkıcı eylemler menüde gizlenir veya görüntülenir.

3) Izgaralar ve düzenler

Izgara (sabit sütun): 2-6 sütun; otomatik sığdırma/otomatik doldurma yoluyla ■.
Duyarlı fayans: 'minmax (240px, 1fr)' - kartlar tam olarak sınırlara büyür.
Duvarcılık/değişen yükseklik: dikkatli; Odak sırası ve okunabilirliği sağlayın.
List (arka arkaya): yatay ekonomi ve sıralama önemli olduğunda.

css
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
gap: 16px;
}
.card {
border-radius: 12px;
background: var(--bg-elevated);
box-shadow: var(--elev-2);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.card__media { aspect-ratio: 16/9; object-fit: cover; }

4) Yoğunluk ve ritim

Kenar boşlukları/girintiler: 12-16 piksel içinde; 8-12 px birimleri arasında.
Satır yüksekliği: 1. 3–1. 5; yazı tipleri: başlık 16-18 px, meta 12-14 px.
Metin kırpma: 'line-clamp: 2-3'; Araç ipucu/detaylarda zorunlu tam metin.

5) Durumlar ve etkileşim

Hover/Focus/Active: gölge/vurgu, ancak düzen olmadan "atlar"; ': focus-visible'her zaman görünür.
Seçilebilir: onay kutusu/çerçeve; Referans kartı ile karıştırılmamalıdır.
Basılı: %98'e kadar azalma + gölge aşağı (≤ 120 ms).
Meşgul/Yükleme: iskelet, "boş'değil.

css
.card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); transition: box-shadow. 16s, transform. 16s; }

6) Görüntüler ve medya

En boy oranı sabittir; Oyun listelerinde - 16:9 veya 4:3.
Tembel yükleme: 'loading =' lazy '' + 'decoding =' async ''.
Baskın poster rengine sahip yer tutucu/iskelet.
Yükleme hatası: kukla resim + resim kapatma simgesi.

html
<img class = "card __ media" src ="..." alt = "Game name" loading =" lazy" onerror =" this. src='/fallback. png'">

7) Rozetler ve etiketler

Kısa (1-2 kelime): Yeni, Canlı, -20 %, İlk 10.
Yalnızca renge güvenemezsiniz - bir simge/metin ekleyin.
Yer: sol üst medya; Birkaç - 4-6 px bir boşluk ile bir yığın halinde.

css
.badge { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:8px; font-size:.75rem; }
.badge--live { background: var(--bg-danger); color: var(--on-danger); }

8) CTA ve Hızlı Eylem

Kart başına bir birincil (örneğin, "Oyna", "Bahis").
Yardımcı simgeler (favoriler, paylaşım,...) - hover/focus tarafından.
Yıkıcı - onay veya geri alma paneli aracılığıyla.

html
<div class="card__actions">
<button class="btn btn--primary">Играть</button>
<button class =" icon" aria-label = "Add to Favorites" title =" B Favorites "> </button>
<button class="icon" aria-haspopup="menu" aria-expanded="false">⋯</button>
</div>

9) Kullanılabilirlik (A11y)

Tüm bağlantı kartı '<a>' açık bir 'aria-label'ile, aksi takdirde: başlık bir bağlantı gibidir, gerisi statiktir.
Sekme sırası görsele karşılık gelir; Odak halkası görünür.
'Alt'ile görüntüler; Dekoratif -' aria-hidden =" true"'.
Durumlar için, 'role =' status ''/' aria-live =' kibar '' kullanın.
AA ≥ metin ve rozet kontrastı; Anlam sadece renk değildir.

10) Performans

Medya ve listelerin tembel yüklenmesi; Pagination veya infinitis nöbetçi-gözlemci ile kaydırma.
Teyp/sonsuz çıkışlar için sanallaştırma (± 10k elemanlar).
Akışı en aza indirin: Yalnızca 'dönüştürme/opaklığı' canlandırın.
Kartları iskeletlerle oluşturun ve verileri yükledikten sonra içerikle değiştirin.

11) İskeletler, hatalar, boş

İskelet, agresif ışıltı olmadan kartın yapısını (medya/metin/düğme) tekrarlar; 'prefers-reduced-motion'ı düşünün.
Hata durumu: simge + kısa metin ("Oyun yüklenemedi") + Yeniden dene düğmesi.
Boş durum: simge/illüstrasyon, açıklama, "Sırada ne var" (filtre/arama/abonelikler).

12) İçerik yönetimi

Kesme: 'line-clamp' + açık araç ipucu.
Uzun sayılar/toplamlar: tablo rakamları: 'font-variant-numeric: tabular-nums; '.
Yerelleştirme: uzun etiketler için + %20-30 genişlik ayırın.
RTL desteği: rozetleri/simgeleri ve hizalamaları çevirin.

13) Karanlık tema ve kontrast

Gölgeler daha zayıftır, kenarlıkları ('1px') saydamlıkla kullanın.
Küçük fontlar için AAA desteği; Titremelerden kaçının.
Ortam, metni okunabilir hale getirmek için ince bir örtü (kaplama %8-12) ile karartılır.

css
.theme-dark. card { background: var(--bg-elevated-dark); box-shadow: var(--elev-1-dark); }
.theme-dark. card__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.12); }

14) Sıralama, filtreler, sayfalama

Üst/yan filtre paneli; Sonuç bir kart ızgarasıdır.
Pagination görünür; sonsuz kaydırma - sadece "Back to Top'ile ve pozisyon tutmak.
Filtreler kaydırma işlemini "sıfırlamaz"; Hızlı bir şekilde (≤ 100 ms) veya göstergeli olarak uygulanır.

15) iGaming'in özellikleri

15. 1 Oyun kartı (slot/masa)

Medya: 16:9 poster, sağlayıcı logosu.
Meta veriler: sağlayıcı, RTP, volatilite, kategoriler (- sadece bilgilendirici, kazanma sözü vermeden).
Rozetler: Yeni, Popüler, Turnuva, Jackpot.
CTA: "Play" + "Demo. "18 +" bağlamı ve sorumlu oyun görünür.

15. 2 Eşleşme/katsayı kartı

Canlı rozet Canlı; zamanlayıcı/dönem.
Anlık hover/press ve güvenli geri alma (izin verilirse) ile anahtar katsayıları (2-3).
Titreşimsiz güncellemeler; Rotayı değiştirirken - temiz aydınlatma.

15. 3 Turnuva/etkinlik kartı

Tarihler, ödül havuzu, kurallar (link).
Durum (Kayıt Açık/Kapalı, Devam Ediyor).
CTA "Katıl", "Kurallar"; Katılımın ilerlemesi (puan/yer).

16) Antipatterns

Tüm kart tıklanabilir + ikincil bağlantıların içinde (odak/tıklama tuzakları).
Yakındaki iki birincil CTA ("Play've" Bonus Satın Al ") - dikkat rekabeti.
Yer tutucu/iskelet yok - atlama ızgarası (CLS).
Sonsuz ışıltı etkileri; gölge animasyonu/bulanıklaştırma (pahalı).
Gri üzerine küçük gri renkli sütun meta verileri (kontrast yok).
Anlamı sadece renkli olarak ileten rozetler.

17) Tasarım sistemi belirteçleri (örnek)

json
{
"card": {
"radius": 12,
"gap": 12,
"mediaRatio": "16/9",
"px": "12 12 12 12",
"shadow": { "rest": "var(--elev-2)", "hover": "var(--elev-3)" }
},
"badge": { "radius": 8, "px": "4 8", "icon": 14 },
"grid": { "gap": 16, "min": 240, "max": 1 },
"motion": { "hoverMs": 160, "pressMs": 100, "fadeMs": 160 },
"a11y": { "contrastAA": true, "focusRingWidth": 2, "focusRingOffset": 2 }
}

18) Snippet'lar

React: evrensel kart

tsx type CardProps = {
title: string;
subtitle?: string;
mediaUrl?: string;
badges?: string[];
onPrimary?: () => void;
primaryLabel?: string;
onFav?: () => void;
children?: React. ReactNode;
};
export default function Card({
title, subtitle, mediaUrl, badges=[], onPrimary, primaryLabel='Открыть', onFav, children
}: CardProps){
return (
<article className="card group focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
<div className="relative">
{mediaUrl? <img className="w-full aspect-[16/9] object-cover" src={mediaUrl} alt={title}/>: <div className="aspect-[16/9] bg-neutral-200"/>}
<div className="absolute top-2 left-2 flex gap-1">
{badges. map(b => <span key={b} className="badge">{b}</span>)}
</div>
</div>
<div className="p-3 grid gap-2">
<h3 className="text-sm font-semibold line-clamp-2" title={title}>{title}</h3>
{subtitle && <p className="text-xs text-neutral-500 line-clamp-2">{subtitle}</p>}
{children}
<div className="flex items-center gap-8">
{onPrimary && <button className="btn btn--primary" onClick={onPrimary}>{primaryLabel}</button>}
{onFav && <button className="icon opacity-0 group-hover:opacity-100" aria-label="В избранное" onClick={onFav}></button>}
</div>
</div>
</article>
);
}

Sonsuz kaydırma nöbetçi

js const sentry = document. querySelector('#sentry');
const io = new IntersectionObserver(entries=>{
if(entries. some(e=>e. isIntersecting)) loadMore();
}, { rootMargin: '200px' });
io. observe(sentry);

19) Metrikler ve deneyler

TO birincil-CTA и Tıklama süresi.
Kaydırma derinliği - tıklayın: "viraj üzerinde "/" viraj altında "üzerine tıklayın.
Kart - görünüm ayrıntıları - dönüşüm.
Rozetlerin görünürlüğü ve CTR üzerindeki etkileri.
İskelet görünür zaman и CLS.
A/B: kartların boyutu, meta veri miktarı, hızlı eylemlerin görünürlüğü, ızgara türü (liste/ızgara).

20) KG kontrol listesi

Kullanılabilirlik

• Odak halkaları görülebilir; Sekme sırası mantıklı.
• Alt-metinler ve 'aria-label' doğrudur; Metin içeren durum rozetleri.
• Metin/arka plan kontrastı ≥ AA.

Davranış

• Bir birincil-CTA; Hızlı eylemler ana senaryoyla çakışmaz.
• Hover/basın/seçili ayırt edilebilir; bağlam menüsü çalışır.
• Boş/hatalar/iskeletler doğrudur; İşte Retry.

Performans

• Tembel medya yükleme; Düzende keskin sıçramalar yok.
• Büyük listelerin sanallaştırılması; 'transform/opacity' animasyonları.

Izgara

• 'minmax (240px, 1fr)'ve' gap 'uyarlanabilir; Duvarcılık odak/okuma düzenini bozmaz.
• RTL/yerelleştirme, kırpma ve rozetleri "kırmaz".

21) Tasarım sistemindeki belgeler

Компоненты: 'Card', 'GameCard', 'MatchCard', 'TournamentCard', 'StatusBadge', 'SkeletonCard'.
Belirteçler: yarıçap/gölgeler/girintiler/katmanlar, rozet renkleri, animasyonlar.
Desenler: "Bir CTA", "Spinner yerine iskelet", "Sonsuz kaydırma + konumunu koruma".
Do/Don't gallery: Aşırı yüklü kart vs minimal, "tıklanabilir tam kart" vs açık öğeler.

Kısa Özet

Kartlar net bir hiyerarşiye, bir ana CTA'ya, öngörülebilir durumlara, istikrarlı ızgaralara ve performans ve erişilebilirliğe saygı duyduklarında çalışır. Belirteçleri ve kalıpları yakalayın, iskeletleri ve tembel yüklemeyi kullanın, içeriği özlü tutun - ve kart arayüzleri, özellikle iGaming komut dosyalarında hızlı, okunabilir ve dönüşüme hazır hale gelecektir.