Interface de cartes et blocs visuels

1) Pourquoi les cartes

• numérisation rapide,
• donne un CTA principal,
• adaptable aux différents conteneurs/colonnes,
• il est prévisible par son comportement (hover, press, focus, menu contextuel).

2) Anatomie de la carte

1. Zone médias (couverture/logo/aperçu, 16 : 9/4 : 3/1 : 1).

2. Titre (1-2 lignes tronquées).

3. Métadonnées (sous-titre, étiquette/catégorie, fournisseur, heure).

4. Statut Badji (nouveau, live, promotion, classement).

5. CENT/actions rapides (bouton ou icônes).

6. Texte secondaire (court, 2-3 lignes max).

7. Contrôleurs (favoris,... contexte).

Hiérarchie : médias → titre → CTA → méta → secondaire. Les actions destructrices sont cachées ou placées dans le menu.

3) Grilles et agencements

Grid (colonne fixe) : 2-6 colonnes ; en adaptant par auto-fit/auto-fill.
Responsive tiles : 'minmax (240px, 1fr)' - les cartes poussent jusqu'aux frontières.
Masonry/hauteur variable : attention ; assurer l'ordre de mise au point et la lisibilité.
List (en série) : lorsque l'économie horizontale et la triabilité sont importantes.

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é et rythme

Champs/retraits : à l'intérieur 12-16 px ; entre les blocs 8-12 px.
Hauteur de ligne : 1. 3–1. 5; polices : titre 16-18 px, méta 12-14 px.
Clipping de texte : 'line-clamp : 2-3' ; nécessairement le texte complet dans tooltip/détails.

5) État et interactivité

Hover/Focus/Active : ombre/rétroéclairage, mais sans « sauts » de la mise en page ; ': focus-visible' est toujours visible.
Selectable : checkbox/cadre ; à ne pas confondre avec la carte de référence.
Pressed : réduction jusqu'à 98 % + ombre vers le bas (≤ 120 ms).
Busy/Loading : squelette, pas « vide ».

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) Images et médias

L'aspect-ratio est rigidement fixe ; sur les listes de jeux - 16:9 ou 4:3.
Chargement paresseux : 'loading =' lazy '+' decoding = 'async'.
Placholder/squelette avec la couleur dominante de l'affiche.
Erreur de téléchargement : image fictive + icône « image-off ».

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

7) Badji et marques

Courts (1-2 mots) : Nouveau, Live, -20 %, Top 10.
Vous ne pouvez pas compter uniquement sur la couleur - ajoutez une icône/texte.
Emplacement : haut à gauche des médias ; plusieurs sont dans la pile avec un écart 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 et actions rapides

Un premier par carte (par exemple, « Jouer », « Parier »).
Icônes auxiliaires (favoris, partages,...) - par hover/focus.
Destructeurs - via une confirmation ou un panneau 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) Accessibilité (A11y)

L'ensemble de la carte-lien est '<a>' avec le 'aria-label'compréhensible, sinon : le titre comme lien, le reste est statique.
L'ordre de Tabulation correspond au visuel ; l'anneau de focus est visible.
Images avec 'alt' ; décoratif -' aria-hidden = » vrai ».
Pour les statuts, utilisez 'role =' status '/' aria-live = 'polite'.
Le contraste du texte et des badges ≥ AA ; le sens n'est pas seulement la couleur.

10) Performance

Chargement paresseux des médias et des listes ; pagination ou infinite-scroll avec l'observateur sentry.
Virtualisation pour bande/infini (± 10k éléments).
Minimisez votre reflow : n'animez que « bou/opacity ».
Rendez les cartes avec des squelettes et remplacez le contenu après le chargement des données.

11) Squelettes, erreurs, vides

Le squelette reprend la structure de la carte (media/texte/bouton), sans shimmer agressif ; tenez compte de 'prefers-reduced-motion'.
Error-state : icône + texte court (« Impossible de charger le jeu ») + bouton Retry.
Empty-state : icône/illustration, explication « Quoi de plus » (filtre/recherche/abonnements).

12) Gestion de contenu

Troncature : 'line-clamp' + indices explicites (tooltip).
Nombres/montants longs : nombres tabulaires : 'font-variant-numeric : tabular-nums ;'.
Localisation : réserve de + 20-30 % de largeur pour les labels longs.
RTL support : flip badge/icônes et alignement.

13) Thème sombre et contraste

Les ombres sont plus faibles, utilisez les limites ('1px') avec transparence.
Prendre en charge AAA pour les petites polices ; évitez les scintillement.
Les médias sont masqués par un voile fin (overlay 8-12 %) pour que le texte soit lu.

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) Tri, filtres, pagination

Panneau de filtres haut/côté ; le résultat est une grille de cartes.
La pagination est visible ; le scroll infini n'est qu'avec « Retour au début » et maintien de la position.
Les filtres ne « réinitialisent » pas le scroll ; s'appliquent rapidement (≤ 100 ms) ou avec un indicateur.

15) Spécificité iGaming

15. 1 Carte de jeu (slot/table)

Médias : affiche 16:9, logo du fournisseur.
Métadonnées : fournisseur, RTP, volatilité, catégories (- seulement informative, sans promesses de gains).
Baggie : Nouveau, Populaire, Tournament, Jackpot.
CTA : « Jouer » + « Démo ». Le contexte « 18 + » et le jeu responsable sont visibles.

15. 2 Carte de match/coefficient

Badge Live ; minuterie/période.
Facteurs clés (2-3) avec hover/press instantané et undo sécurisé (si admis).
Mises à jour sans scintillement ; Lorsque vous changez de cap, un éclairage soigné.

15. 3 Carte Tournoi/Event

Dates, prix, règles (référence).
Statut (« Inscription ouverte/fermée », « En cours »).
CTA « Rejoindre », « Règles » ; progrès de la participation (points/place).

16) Anti-modèles

Toute la carte est cliquable + à l'intérieur des liens secondaires (pièges de focus/clics).
Deux primary-CTA à proximité (« Jouer » et « Acheter un bonus ») - la concurrence de l'attention.
Absence de pistes/squelettes → maillage « sautant » (CLS).
Effets shimmer infinis ; animation shadow/blur (cher).
Métadonnées « dans la colonne » en gris fin sur gris (pas de contraste).
Badji, qui ne disent que la couleur.

17) Tokens de système de conception (exemple)

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

React : une carte universelle

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) Métriques et expériences

CTR primary-CTA и Time-to-Click.
Scroll-depth → click : click « au-dessus du pli »/« sous le pli ».
Carte → affichage des détails → conversion.
Visibilité des badges et leur impact sur le CTR.
Skeleton visible time и CLS.
A/B : taille des cartes, nombre de métadonnées, visibilité des actions rapides, type de grille (list/grid).

20) Liste de vérification QA

Disponibilité

• Les anneaux de focus sont visibles ; l'ordre de Tabulation est logique.
• Les textes alt et 'aria label' sont corrects ; Status Badji avec texte.
• Contraste texte/fond ≥ AA.

Comportement

• Une première LTC ; les actions rapides ne chevauchent pas le scénario principal.
• Hover/press/selected sont distinguables ; le menu contextuel fonctionne.
• Les erreurs/squelettes vides sont corrects ; il y a Retry.

Performance

• Chargement paresseux des médias ; Il n'y a pas de sauts brusques de mise en page.
• Virtualisation des grandes listes ; animations « bou/opacity ».

Grille

• « minmax (240px, 1fr) » et « gap » sont adaptatifs ; Masonry ne casse pas le focus/ordre de lecture.
• RTL/localisation ne « cassent » pas la taille et les badges.

21) Documentation dans le système de conception

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Tokens : rayon/ombres/indentations/couches, couleurs badges, animations.
Patterns : « One CTA », « Skeleton au lieu de Spinner », « Infinit-scroll + maintien de la position ».
Do/Don't-gallery : surchargé carte vs minimum, « cliquable carte entière » vs éléments explicites.

Résumé succinct

Les cartes fonctionnent quand elles ont une hiérarchie claire, un CTA principal, des états prévisibles, des grilles stables et le respect de la performance et de l'accessibilité. Fixez les jetons et les modèles, utilisez les squelettes et le téléchargement paresseux, gardez le contenu concis - et les interfaces de cartes deviendront rapides, lisibles et convertibles, en particulier dans les scénarios iGaming.