Interfaz de tarjeta y bloques visuales

1) Por qué las tarjetas

• se escanea rápidamente,
• da un CTA maestro,
• se adapta a diferentes contenedores/columnas,
• predecible por comportamiento (hover, press, enfoque, menú contextual).

2) Anatomía de la tarjeta

1. Zona de medios (portada/logotipo/vista previa, 16: 9/4: 3/1: 1).

2. Título (1-2 líneas truncadas).

3. Metadatos (subtítulo, etiqueta/categoría, proveedor, hora).

4. Etiquetas de estado (novedad, en vivo, promoción, clasificación).

5. Acción rápida/CIEN (botón o iconos).

6. Texto secundario (corto, 2-3 líneas max).

7. Controles (elegidos,... contexto).

Jerarquía: media → cabecera → CTA → meta → secundaria. Las acciones destructivas se ocultan o se exponen en el menú.

3) Cuadrículas y distribuciones

Grid (columna fija): 2-6 columnas; adaptable a través de auto-fit/auto-fill.
Tiles responsables: 'minmax (240px, 1fr)' - las tarjetas crecen exactamente hasta los límites.
Masonry/altura variable: cuidado; proporcionar orden de enfoque y legibilidad.
Lista (en fila): cuando el ahorro horizontal y la ordenabilidad son 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) Densidad y ritmo

Campos/sangría: dentro de 12-16 px; entre las unidades 8-12 px.
Altura de fila: 1. 3–1. 5; fuentes: título 16-18 px, meta 12-14 px.
Clipping del texto: 'line-clamp: 2-3'; necesariamente texto completo en tooltip/detalles.

5) Estados y interactividad

Hover/Focus/Active: sombra/retroiluminación, pero sin «saltos» de diseño; ': focus-visible' siempre se ve.
Selectable: caja de verificación/marco; no confundir con una tarjeta de referencia.
Pressed: reducción a 98% + sombra hacia abajo (≤ 120 ms).
Busy/Loading: un esqueleto, no «vacío».

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) Imágenes y medios

Aspect-ratio es rígidamente fijo; en las listas de juegos - 16:9 o 4:3.
Carga perezosa: 'loading = "lazy"' + 'decoding = "async''.
Playsholder/skeleton con el color dominante del póster.
Error de descarga: imagen subyacente + icono «image-off».

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

7) Etiquetas y etiquetas

Corto (1-2 palabras): Nuevo, Live, -20%, Top 10.
No puede confiar sólo en el color: agregue un icono/texto.
Ubicación: parte superior izquierda de los medios; varios - en una pila con un espacio 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 y acción rápida

Uno primario por tarjeta (por ejemplo, «Jugar», «Apostar»).
Iconos auxiliares (favoritos, compartir,...) - por hover/focus.
Destructivo - a través de confirmación o panel 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) Accesibilidad (A11y)

Toda la tarjeta de referencia es '<a>' con un 'aria-label' comprensible, de lo contrario: el título es como un enlace, el resto es estático.
El orden Amb corresponde a lo visual; el anillo focal es visible.
Imágenes con 'alt'; decorativo -' aria-hidden =» true»'.
Para los estados, utilice 'role =' status '/' aria-live = 'polite'.
Contraste de texto y etiquetas ≥ AA; el significado no es sólo de color.

10) Performance

Carga perezosa de medios y listas; paginación o infinit-scroll con un observador sentry.
Virtualización para cintas/infinitas entregas (± 10k elementos).
Minimice el reflow: anime sólo 'transformación/opacity'.
Renderice las tarjetas con esqueletos y reemplace el contenido después de cargar los datos.

11) Esqueletos, errores, vacíos

El esqueleto repite la estructura de la tarjeta (media/texto/botón), sin un shimmer agresivo; tenga en cuenta 'prefers-reduced-motion'.
Error-state: icono + texto corto («No se puede cargar el juego») + botón Retry.
Empty-state: icono/ilustración, explicación, «Qué sigue» (filtro/búsqueda/suscripción).

12) Administración de contenido

Truncamiento: 'line-clamp' + pistas explícitas (tooltip).
Números largos/sumas: números tabulares: 'font-variant-numeric: tabular-nums;'.
Localización: reserva de + 20-30% de ancho para etiquetas largas.
Soporte RTL: flip de etiquetas/iconos y alineación.

13) Tema oscuro y contraste

Las sombras son más débiles, utilice los bordes ('1px') con transparencia.
Mantenga AAA para fuentes pequeñas; evite los parpadeos.
Los medios se oscurecen con un sutil velo (overlay 8-12%) para que el texto sea leído.

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) Clasificación, filtros, paginación

Panel de filtros en la parte superior/lateral; el resultado es una cuadrícula de tarjetas.
La paginación es visible; El skroll infinito es sólo con «Volver al principio» y mantener la posición.
Los filtros no «reinician» el scroll; se aplican rápidamente (≤ 100 ms) o con un indicador.

15) Especificidad de iGaming

15. 1 Tarjeta del juego (slot/table)

Medios de comunicación: póster 16:9, logotipo del proveedor.
Metadatos: proveedor, RTP, volatilidad, categorías (- sólo informativo, sin promesas de ganar).
Etiquetas: Nuevo, Popular, Torneo, Jackpot.
CTA: «Jugar» + «Demo». El contexto «18 +» y el juego responsable son visibles.

15. 2 Tarjeta del partido/del coeficiente

Una etiqueta viva en vivo; temporizador/período.
Coeficientes clave (2-3) con hover/press instantáneo y seguro undo (si se admite).
Actualizaciones sin parpadeos; Cuando el curso cambia, retroiluminación ordenada.

15. 3 Tarjeta de torneo/evento

Fechas, fondo de premios, reglas (enlace).
Estado («Registro abierto/cerrado», «En curso»).
CTA «Únete», «Reglas»; progreso de la participación (puntos/lugar).

16) Antipattern

Toda la tarjeta click + dentro de enlaces secundarios (trampas de enfoque/clics).
Dos primary-CTA cerca («Jugar» y «Comprar bonificación») es una competencia de atención.
La ausencia de playsholders/skeletones → una malla de «salto» (CLS).
Efectos de shimmer infinitos; animación por sombra/blur (caro).
Metadatos «en columna» en gris fino sobre gris (sin contraste).
Las insignias, transmitiendo el significado sólo por el color.

17) Tokens del sistema de diseño (ejemplo)

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

Nat: tarjeta 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>
);
}

Sentry Infinit-scroll

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étricas y experimentos

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: clics «sobre la flexión »/« debajo de la flexión».
Tarjeta → ver detalles → conversión.
Visibilidad de las insignias y su impacto en el CTR.
Skeleton visible time и CLS.
A/B: tamaño de las tarjetas, número de metadatos, visibilidad de acciones rápidas, tipo de cuadrícula (list/grid).

20) QA-check-list

Disponibilidad

• Los anillos focales son visibles; El orden Amb es lógico.
• Los textos alt y 'aria-label' son correctos; etiquetas de estado con texto.
• Contraste de texto/fondo ≥ AA.

la Conducta

• Uno primario-CTA; las acciones rápidas no superponen el escenario principal.
• Hover/press/selected son distinguibles; el menú contextual funciona.
• Los errores/esqueletos vacíos son correctos; hay un Retry.

Performance

• Carga perezosa de medios; no hay saltos bruscos en el diseño.
• Virtualización de grandes listas; animaciones 'transformación/opacity'.

Cuadrícula

• 'minmax (240px, 1fr)' y 'gap' son adaptativos; Masonry no rompe el enfoque/orden de lectura.
• El RTL/localización no «rompe» el recorte y las etiquetas.

21) Documentación en el sistema de diseño

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Señales: radio/sombras/sangrías/capas, colores de insignias, animaciones.
Patrones: «Un CTA», «Skeleton en lugar de spinner», «Infinit-skroll + mantener la posición».
Do/Don 't-gallery: tarjeta sobrecargada vs mínima, "click all card' vs elementos explícitos.

Resumen breve

Las tarjetas funcionan cuando tienen una jerarquía clara, una CTA principal, estados predecibles, rejillas estables y respeto por la performance y la accesibilidad. Fije tokens y patrones, utilice esqueletos y descargas perezosas, mantenga el contenido conciso - y las interfaces de tarjetas se volverán rápidas, legibles y conversivas, especialmente en escenarios iGaming.