Interfață card și blocuri vizuale

1) De ce carduri

• scanat rapid,
• dă un singur maestru CTA,
• se adaptează la diferite containere/coloane,
• previzibil în comportament (hover, apăsați, focus, meniu contextual).

2) Anatomia unui card

1. Zonă media (copertă/logo/previzualizare, 16: 9/4: 3/1: 1).

2. Antet (1-2 linii trunchiate).

3. Metadate (subtitrare, etichetă/categorie, furnizor, timp).

4. Insigne de stare (noi, live, promovare, evaluare).

5. CTA/acțiuni rapide (buton sau pictograme).

6. Text secundar (linii scurte, max 2-3).

7. Controale (favorite,... context).

Ierarhie: media antet CTA meta secundar. Acțiunile distructive sunt ascunse sau afișate în meniu.

3) Grile și machete

Grilă (coloană fixă): 2-6 coloane, ■ prin auto-fit/auto-umplere.
Plăci receptive: „minmax (240px, 1fr)” - cărțile cresc exact până la frontiere.
Zidărie/înălțime variabilă: atent; asigură ordinea focalizării și lizibilitatea.
Listă (într-un rând): atunci când economia orizontală și sortarea sunt importante.

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) Densitate și ritm

Margini/liniuțe: interior 12-16 px; între unitățile 8-12 px.
Înălțimea rândului: 1. 3–1. 5; fonturi: titlul 16-18 px, meta 12-14 px.
Tăiere text: „linie-clemă: 2-3”; obligatoriu text complet în tooltip/detalii.

5) Stări și interactivitate

Hover/Focus/Active: umbră/evidențiere, dar fără aspect „salturi”; „: focus-vizibil” întotdeauna vizibil.
Selectabil: caseta de selectare/cadru; a nu se confunda cu un card de referinţă.
Apăsat: scădeți până la 98% + umbră în jos (≤ 120 ms).
Ocupat/Încărcare: schelet, nu „gol”.

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) Imagini și mass-media

Raportul de aspect este fix; pe listele de jocuri - 16:9 sau 4:3.
Încărcare leneşă: 'încărcare =' leneş '' + 'decodare =' async' '.
Înlocuitor/schelet cu culoare dominantă poster.
Eroare de încărcare: imagine inactivă + pictogramă imagine-off.

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

7) Insigne și etichete

Scurt (1-2 cuvinte): Nou, Live, -20%, Top 10.
Nu vă puteți baza doar pe culoare - adăugați o pictogramă/text.
Locul de amplasare: partea de sus stânga mass-media; mai multe - într-o stivă cu un decalaj de 4-6 px.

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 și acțiune rapidă

Un primar pe carte (de exemplu, „Play”, „Bet”).
Icoane auxiliare (favorite, share,...) - prin hover/focus.
Distructive - prin confirmare sau anulare-panou.

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) Disponibilitate (A11y)

Întreaga carte de legătură este „<a>” cu o „etichetă arie” clară, altfel: titlul este ca un link, restul este static.
Ordinea Tab-ului corespunde vizualului; inelul de focalizare este vizibil.
Imagini cu „alt”; decorativ -' aria-ascuns =” adevărat”'.
Pentru statusuri, utilizați „rol =” stare „”/„ aria-live =” politicos „”.
Text și contrast insignă ≥ AA; sensul nu este doar culoare.

10) Performanță

Încărcarea leneș de mass-media și liste; paginare sau infinita defilare cu santinela-observator.
Virtualizare pentru ieşiri pe bandă/infinit (± elemente 10k).
Minimizaţi fluxul: Animaţi numai 'transformare/opacitate'.
Redați carduri cu schelete și înlocuiți cu conținut după încărcarea datelor.

11) Schelete, greșeli, gol

Scheletul repetă structura cardului (media/text/buton), fără strălucire agresivă; luați în considerare „prefers-redusă-mișcare”.
Stare de eroare: pictograma + text scurt („Nu a reușit să încarce jocul”) + butonul Retry.
Stare goală: pictogramă/ilustrație, explicație, „Ce urmează” (filtru/căutare/abonamente).

12) Gestionarea conținutului

Truncation: „line-clamp” + tooltip explicit.
Numere/sume lungi: cifre tabel: 'font-variant-numeric: tabular-nums; '.
Localizare: rezervă + 20-30% lățime pentru etichete lungi.
Suport RTL: insigne/pictograme și alinieri.

13) Temă întunecată și contrast

Umbrele sunt mai slabe, folosesc frontierele („1px”) cu transparență.
Suport AAA pentru fonturi mici; evita pâlpâituri.
Media este întunecată de un voal subțire (suprapunere 8-12%) pentru a face textul ușor de citit.

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) Sortare, filtre, paginare

Panou filtru sus/lateral; rezultatul este o grilă de cărți.
Paginarea este vizibilă; defilare fără sfârșit - numai cu „Înapoi la început” și păstrarea poziției.
Filtrele nu „resetează” derularea; aplicat rapid (≤ 100 ms) sau cu indicator.

15) Specificul iGaming

15. 1 Carte de joc (slot/masă)

Media: 16:9 poster, logo-ul furnizorului.
Metadate: furnizor, RTP, volatilitate, categorii (- doar informativ, fără promisiuni de câștig).
Insigne: Nou, Popular, Turneu, Jackpot.
CTA: "Play" + "Demo. "Contextul "18 +" și jocul responsabil sunt vizibile.

15. 2 Card de potrivire/coeficient

Live insigna Live; cronometru/perioadă.
Coeficienți cheie (2-3) cu hover instant/presă și anulare în condiții de siguranță (dacă este permis).
Actualizări fără flicker; atunci când se schimbă cursul - iluminare îngrijită.

15. 3 carte de turneu/eveniment

Date, fond de premiere, reguli (link).
Status (Înregistrare deschisă/închisă, în curs).
CTA „Alăturați-vă”, „Reguli”; progresul participării (puncte/loc).

16) Antipattern

Întreaga carte este clickable + în interiorul link-uri secundare (focus/click capcane).
Două CTA-uri primare din apropiere („Play” și „Buy Bonus”) - competiție de atenție.
Nu există înlocuitori/schelete → grila de sărituri (CLS).
Efecte strălucitoare nesfârșite; animație umbră/ceață (scump).
Metadate coloană în gri mic pe gri (nici un contrast).
Insigne care transmit sensul numai în culoare.

17) Proiectarea tokenurilor sistemului (exemplu)

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) Fragmente

Reacție: card universal

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>
);
}

Santinelă de derulare infinită

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

19) Măsurători și experimente

CTR primar-CTA и Time-to-Click.
Derulați-adâncime → faceți clic pe: faceți clic pe „peste îndoire „/” sub îndoire ”.
Card → vizualizare detalii → conversie.
Vizibilitatea ecusoanelor și impactul acestora asupra CTR.
Timp vizibil schelet и CLS.
A/B: dimensiunea cardurilor, cantitatea de metadate, vizibilitatea acțiunilor rapide, tipul grilei (listă/grilă).

20) Lista de verificare QA

Disponibilitate

Inelele de focalizare sunt vizibile; Ordinea filelor este logică.

• Textele Alt și „eticheta aria” sunt corecte; insigne de stare cu text.
• Contrast text/fundal ≥ AA.

Comportament

• Un primar-CTA; acțiunile rapide nu se suprapun scenariului principal.
• Hover/apăsați/selectat distinctiv; meniul contextual funcționează.
• Gol/erori/schelete sunt corecte; Uite-l pe Retry.

Performanță

• Încărcare media leneșă; nu există salturi ascuțite în aspect.
• Virtualizarea listelor mari; animații „transform/opacitate”.

Grilă

• „minmax (240px, 1fr)” și „decalaj” sunt adaptive; Zidăria nu rupe ordinea de focalizare/citire.
• RTL/localizare nu „rupe” decuparea și insigne.

21) Documentația în sistemul de proiectare

Компоненты: 'Card',' GameCard', 'MatchCard',' TournamentCard', 'StatusBadge', 'SkeletonCard'.
Jetoane: rază/umbre/liniuțe/straturi, culori insignă, animații.
Modele: „One CTA”, „Skeleton în loc de spinner”, „Infinite scrolling + menținerea poziției”.
Do/Don' t galerie: card supraîncărcat vs minim, „carte întreagă clickable” vs elemente explicite.

Scurt rezumat

Cardurile funcționează atunci când au o ierarhie clară, un master CTA, stări previzibile, grile stabile și respect pentru performanță și accesibilitate. Capturați jetoane și modele, utilizați schelete și încărcare leneșă, păstrați conținutul concis - iar interfețele cardurilor vor deveni rapide, ușor de citit și gata de conversie, în special în scripturile iGaming.