Interfaccia di carte e blocchi visivi

1) Perché le carte

• scansione rapida,
• dà un CTA principale,
• si adatta a diversi contenitori/colonne,
• prevedibile per comportamento (hover, press, fuoco, menu contestuale).

2) Anatomia della carta

1. Area media (copertina/logo/anticipo, 16: 9/4: 3/1: 1).

2. Titolo (1-2 righe troncate).

3. Metadati (sottotitolo, tag/categoria, provider, tempo).

4. Badge stato (novità, live, promozione, rating).

5. Azione 100/veloce (pulsante o icone).

6. Testo secondario (breve, 2-3 righe max).

7. Controllori (preferiti,... contesto).

Gerarchia: l'intestazione mediatica del CTA meta è secondaria. Le azioni distruttive sono nascoste o riportate nel menu.

3) Griglie e mappature

Grid (colonna fissa): 2-6 colonne; adattamento tramite auto-fit/auto-fill.
Responsive tiles: 'minmax (240px, 1fr)' - Le carte crescono esattamente fino ai confini.
Masonry/altezza variabile: attenzione; Garantire l'ordine di gioco e la leggibilità.
List (in fila) - Quando il risparmio orizzontale e l'ordinabilità sono importanti.

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) Densità e ritmo

Campi/indentazioni: dentro 12-16 px; Tra i blocchi 8-12 px.
Altezza riga: 1. 3–1. 5; caratteri: titolo 16-18 px, meta 12-14 px.
Clipping testo: 'line-clamp: 2-3'; il testo completo è obbligatorio in tooltip/dettagli.

5) Stati e interattività

Hover/Focus/Active: ombra/evidenziazione, ma senza «sbalzi» del layout; 'focus-visibile'è sempre visibile.
Selectable: checkbox/cornice; non confondere con la scheda di riferimento.
Pressed: riduzione fino al 98% + ombra verso il basso (≤ 120 ms).
Busy/Loading: skeleton, non vuoto.

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) Immagini e media

Aspect-ratio è rigidamente fisso; nelle liste dei giochi - 16:9 o 4:3.
Caricamento pigro: "loading =" lazy "'+" decoding = "async" ".
Playsholder/skeleton con il colore dominante del poster.
Errore di caricamento: immagine contraffatta + icona immagine-off.

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

7) Badge e etichette

Breve (1-2 parole): New, Live, -20%, Top 10.
Non puoi fare affidamento solo sul colore - aggiungi un'icona/testo.
Posizione: alto a sinistra del media; diversi - in stack con spazio 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 e azione rapida

Un primary per tessera (ad esempio «Gioca», «Scommetti»).
Icone secondarie (preferiti, condividere,...) - hover/focus.
Distruttivi - attraverso la conferma o il pannello undo.

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) Disponibilità (A11y)

L'intera scheda di riferimento è «<a>» con «aria-label» comprensibile, altrimenti il titolo è un riferimento, il resto è statico.
L'ordine di Taib corrisponde a quello visivo; L'anello di fuoco è visibile.
Immagini dì alt "; decorativo:' aria-hidden =» true».
Per gli stati'rolle = «status »/' aria-live =« polite ».
Contrasto tra testo e badge AA; Non è solo il colore.

10) Performance

Caricamento pigro dei media e degli elenchi; paginazione o infit scroll con sensry-osservatore.
Virtualizzazione per le erogazioni a nastro/infinite (© 10k elementi).
Ridurre al minimo il reflow: animare solo 'form/opacity'.
Rendete le scheletri e sostituite i contenuti dopo aver scaricato i dati.

11) Scheletri, errori, vuoti

Skeleton ripropone la struttura della carta (media/testo/pulsante) senza uno shimmer aggressivo; considerate «preferers-reduced-motion».
Errore-stato: icona + testo breve («Impossibile caricare la partita») + pulsante Retry.
Empty-state: icone/grafica, spiegazione, «Cosa segue» (filtro/ricerca/sottoscrizioni).

12) Gestione dei contenuti

Taglio: «line-clamp» + suggerimenti espliciti (tooltip).
Numeri/somme lunghi: «font-variant-numeric: tabula-nums;».
Localizzazione: + 20-30% di larghezza per etichette lunghe.
Supporto RTL: flirt badge/icone e allineamenti.

13) Tema oscuro e contrasto

Le ombre sono più deboli, usate i bordi ('1px') con trasparenza.
Supporto AAA per i caratteri più piccoli; Evitate di soffocare.
I media vengono oscurati con un velo sottile (overlay 8-12%) in modo che il testo venga letto.

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) Ordinamento, filtri, paginazione

Barra dei filtri superiore/laterale; il risultato è una griglia di carte.
La paginazione è visibile; Lo scroll infinito è solo con «Indietro all'inizio» e mantenendo la posizione.
I filtri non «reimpostano» lo scroll; si applicano rapidamente (≤ 100 ms) o con indicatore.

15) Specificità del iGaming

15. 1 Scheda di gioco (slot/table)

Media: poster 16:9, logo del provider.
Metadati: provider, RTP, volatilità, categorie (- solo informazione, nessuna promessa di vincita).
Badge: New, Popolare, Tourment, Jackpot.
CTA: Gioco + Demo. Il contesto «18 +» e il gioco responsabile sono visibili.

15. 2 Scheda partita/coefficiente

Il badge live dal vivo; timer/periodo.
Coefficienti chiave (2-3) con istantanea hover/press e sicuro undo (se consentito).
Aggiornamenti senza misurazioni quando cambia rotta - Evidenziazione attenta.

15. 3 Tessera torneo/iventa

Date, premi, regole (link).
Stato (Registrazione aperta/chiusa, In corso).
CTA Accetta, Regole; progresso della partecipazione (punti/posto).

16) Antipattern

L'intera scheda è cliccabile + all'interno dei collegamenti secondari (trappole di fuoco/clic).
Due primary-CTA accanto («Gioca» e «Compra bonus») sono una competizione di attenzione.
L'assenza di playsholder/scheletri → la griglia CLS.
Effetti shimmer infiniti; animazione con ombra/blur (costoso).
Metadati in colonna di piccolo grigio su grigio (nessun contrasto).
Badge che trasmettono solo il colore.

17) Token di progettazione (esempio)

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

Carta universale React

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

Infinit scroll 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) Metriche ed esperimenti

CTR primary-CTA и Time-to-Click.
Scroll-depth-click: click sopra il piegatura/sotto il piegatura.
La scheda mostra i dettagli della conversione.
La visibilità dei badge e la loro influenza sulla CTR.
Skeleton visible time и CLS.
A/B: dimensioni delle schede, numero di metadati, visibilità delle azioni rapide, tipo di griglia (list/grid).

20) Lista assegni QA

Disponibilità

• Gli anelli di fuoco sono visibili; l'ordine di Taib è logico.
• I testi alt e «aria-label» sono corretti; stato-badge con testo.
• Contrasto testo/sfondo di AA.

Comportamento

• Un primary-CTA; le azioni rapide non sovrappongono lo script principale.
• Hover/press/selected sono diversi; il menu di scelta rapida funziona.
• Vuoti/errori/scheletri sono corretti; C'è Retry.

Performance

• Scaricamento di media pigro; Non ci sono picchi di layout bruschi.
• Virtualizzazione di elenchi di grandi dimensioni animazioni'form/opacity '.

Griglia

• «minmax (240px, 1fr)» e «gap» sono adattivi; Masonry non rompe l'ordine di lettura.
• RTL/localizzazione non «rompono» il taglio e i badge.

21) Documentazione in progettazione

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Token: raggio/ombre/ritiri/livelli, colori dei badge, animazioni.
Pattern: Un CTA, Skeleton anziché Spinner, Infinit Scroll + Conservazione posizione.
Do/Don't-gallery - La scheda vs sovraccarica è minima, l'intera scheda è cliccabile vs elementi espliciti.

Breve riepilogo

Le schede funzionano quando hanno una gerarchia chiara, un CTA principale, condizioni prevedibili, griglie sostenibili e rispetto della performance e della disponibilità. Fissate token e pattern, usate scheletri e scaricamenti pigri, tenete i contenuti concisi e le interfacce di carte diventeranno veloci, leggibili e conversibili, soprattutto negli scenari di iGaming.