Kart interfeysi və vizual bloklar

1) Niyə kartlar

• tez taranır,
• bir əsas CTA verir,
• müxtəlif konteynerlərə/sütunlara uyğunlaşır,
• davranış proqnozlaşdırıla bilər (hover, press, fokus, kontekstli menyu).

2) Kartın anatomiyası

1. Media zonası (üz qabığı/loqo/preview, 16: 9/4: 3/1: 1).

2. Başlıq (1-2 kəsikli sətirlər).

3. Metadata (altbaşlıq, tag/kateqoriya, provayder, vaxt).

4. Status nişanları (yeni, canlı, aksiya, reytinq).

5. STA/sürətli hərəkətlər (düymə və ya nişanlar).

6. İkincili mətn (qısa, 2-3 sətir max).

7. Nəzarət (seçilmiş,... kontekst).

Hiyerarxiya: media → başlıq → CTA → meta → ikincil. Dağıdıcı hərəkətlər gizli və ya menyuda verilir.

3) Mesh və düzən

Grid (sabit sütun): 2-6 sütun; auto-fit/auto-fill vasitəsilə adaptasiya.
Responsive tiles: 'minmax (240px, 1fr)' - kartlar düz sərhədlərə qədər böyüyür.
Masonry/dəyişən hündürlük: diqqətlə; fokus və oxunabilirlik qaydasını təmin edin.
List (bir sıra): üfüqi qənaət və çeşidlənmə vacib olduqda.

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) Sıxlıq və ritm

Sahələr/girintilər: 12-16 px daxilində; 8-12 px blokları arasında.
Sətir hündürlüyü: 1. 3–1. 5; şriftlər: başlıq 16-18 px, meta 12-14 px.
Mətn klippinqi: 'line-clamp: 2-3'; tooltip/detallarda tam mətn tələb olunur.

5) Vəziyyət və interaktivlik

Hover/Focus/Active: kölgə/işıqlandırma, lakin «atlama» maketi olmadan; ': focus-visible' həmişə görürük.
Selectable: checkbox/çərçivə; link kartı ilə qarışdırmayın.
Pressed: 98% -ə qədər azalma + aşağı kölgə (≤ 120 ms).
Busy/Loading: skelet deyil, «boş».

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) Şəkillər və Media

Aspect-ratio sərt sabit; oyunlar siyahısında - 16:9 və ya 4:3.
Tənbəl yükləmə:' loading =» lazy»' +' decoding =» async»'.
Dominant afişa rəngi ilə pleysholder/skelet.
Yükləmə səhvi: saxta şəkil + «image-off» simgəsi.

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

7) Nişanlar və nişanlar

Qısa (1-2 söz): Yeni, Canlı, -20%, Top 10.
Yalnız rəngə güvənmək olmaz - ikona/mətn əlavə edin.
Yerləşmə: media sol üst; bir neçə - 4-6 px boşluğu ilə yığın.

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 və sürətli fəaliyyət

Kart başına bir primary (məsələn, «Oyna», «Bahis et»).
Köməkçi nişanlar (seçilmiş, paylaşmaq,...) - hover/fokus.
Destruktiv - təsdiq və ya undo panel vasitəsilə.

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) Mövcudluq (A11y)

Bütün link kartı - '<a>' ilə başa düşülən 'aria-label', əks halda: başlıq link kimi, qalanları statikdir.
Tab sifariş vizual uyğun; focus ring görünür.
Şəkillər 'alt'; dekorativ -' aria-hidden =» true»'.
Statuslar üçün 'role = «status» '/' aria-live = «polite»' istifadə edin.
Mətn və nişanların kontrastı ≥ AA; mənası yalnız rəng deyil.

10) Performans

Media və siyahıların tənbəl yüklənməsi; sentry müşahidəçi ilə pagination və ya infinit scroll.
Bant/sonsuz verilişlər üçün virtualizasiya (± 10k element).
Reflow-u minimuma endirin: yalnız 'transform/opacity' animasiya edin.
Kartları skeletonlarla render edin və məlumatları yüklədikdən sonra məzmunu əvəz edin.

11) Skeletonlar, səhvlər, boş

Skelet kart strukturunu təkrarlayır (media/mətn/düymə), aqressiv shimmer olmadan; 'prefers-reduced-motion' nəzərə alın.
Error-state: ikon + qısa mətn («Oyun yüklənə bilmədi») + Retry düyməsi.
Empty-state: Simge/illüstrasiya, izahat, «Sonrakı nə» (filter/axtarış/abunə).

12) Məzmunun idarə edilməsi

Kəsilməsi: 'line-clamp' + aydın ipuçları (tooltip).
Uzun ədədlər/cədvəllər: 'font-variant-numeric: tabular-nums;'.
Lokalizasiya: uzun etiketlər üçün ehtiyat + 20-30% enində.
RTL dəstəyi: flip nişanlar/simgələr və hizalama.

13) Qaranlıq mövzu və kontrast

Kölgələr zəifdir, sərhədləri ('1px') şəffaflıqla istifadə edin.
Kiçik şriftlər üçün AAA dəstəkləyin; titrəməkdən çəkinin.
Media mətnin oxunması üçün nazik örtüklə (8-12% overlay) qaralı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) Çeşidləmə, filtrlər, paginasiya

Filter paneli üst/yan; nəticə - kart şəbəkəsi.
Pagination görünür; sonsuz scroll - yalnız «Başlanğıc geri» və mövqeyi saxlamaq.
Filtrlər skroll «atmaq» deyil; tez (≤ 100 ms) və ya göstərici ilə tətbiq olunur.

15) iGaming xüsusiyyətləri

15. 1 Oyun kartı (slot/table)

Media: posteri 16:9, provayder loqosu.
Metadata: provayder, RTP, dəyişkənlik, kateqoriyalar (- yalnız məlumatlı, uduşsuz).
Nişanlar: New, Popular, Tournament, Jackpot.
CTA: «Play» + «Demo». Kontekst «18 +» və məsuliyyətli oyun - görünür.

15. 2 Matç/əmsal kartı

Canlı döş nişanı; taymer/dövr.
Ani hover/press və təhlükəsiz undo (əgər icazə verilirsə) ilə əsas əmsallar (2-3).
Titrəmədən yeniləmələr; kursu dəyişdikdə - diqqətli işıqlandırma.

15. 3 Turnir/tədbir kartı

Tarixlər, mükafat fondu, qaydalar (link).
Status («Qeydiyyat açıq/bağlıdır», «Gəlir»).
CTA «Qoşulmaq», «Qaydalar»; iştirak tərəqqi (xal/yer).

16) Antipattern

Bütün kart klikabildir + daxili ikincil linklər (fokus/klik tələləri).
Yaxınlıqda iki primary-CTA («Play» və «Bonus almaq») - diqqət rəqabət.
Heç bir pleysholder/skelet → «atlama» mesh (CLS).
Sonsuz shimmer effektləri; kölgə/blur animasiya (bahalı).
Metadata «sütun» kiçik boz boz (kontrast yoxdur).
Yalnız rənglə məna verən nişanlar.

17) Dizayn sistemi tokenləri (nümunə)

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) Snippetlər

React: universal 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>
);
}

İnfinit-skroll sentry

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

19) Metriklər və təcrübələr

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: «bükülmə üzərində »/« bükülmə altında» klik.
Kart → təfərrüatlara baxın → konvertasiya.
Nişanların görünürlüyü və onların CTR-ə təsiri.
Skeleton visible time и CLS.
A/B: kartların ölçüsü, meta məlumatların sayı, sürətli hərəkətlərin görünürlüyü, mesh növü (list/grid).

20) QA-çek siyahısı

Mövcudluq

• Focus ring görünür; Tab qaydası məntiqlidir.
• Alt mətnlər və 'aria-label' düzgün; mətn ilə status nişanları.
• Mətn/fon kontrastı ≥ AA.

Davranış

• Bir primary-CTA; sürətli hərəkətlər əsas ssenarini örtmür.
• Hover/press/selected fərqlidir; kontekstli menyu işləyir.
• Boş/səhvlər/skeletlər doğrudur; Retry var.

Performans

• Tənbəl media yükləmə; heç bir kəskin maket sıçrayışlar.
• Böyük siyahıların virtuallaşdırılması; animasiya 'transform/opacity'.

Mesh

• 'minmax (240px, 1fr)' və 'gap' adaptivdir; Masonry fokus/oxu qaydasını pozmur.
• RTL/lokalizasiya kəsmə və nişanları «sındırmır».

21) Dizayn sistemində sənədləşmə

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Tokenlər: radius/kölgə/girintilər/qatlar, nişan rəngləri, animasiyalar.
Nümunələr: «Bir CTA», «Spinner əvəzinə skeleton», «İnfinit scroll + mövqeyi saxlamaq».
Do/Don 't-qalereyası: həddindən artıq yüklənmiş kart vs minimal, «bütün kart tıklanabilir» vs aşkar elementlər.

Qısa xülasə

Kartlar aydın bir iyerarxiya, bir əsas CTA, proqnozlaşdırıla bilən şərtlər, davamlı şəbəkələr və performans və əlçatanlığa hörmət olduqda işləyir. Tokenləri və nümunələri düzəldin, skeletlərdən və tənbəl yükləmələrdən istifadə edin, məzmunu lakonik saxlayın - və kart interfeysləri xüsusilə iGaming ssenarilərində sürətli, oxunaqlı və konversiyalı olacaq.