Interface de cartas e blocos visuais

1) Porquê os cartões

• rapidamente escaneado,
• dá um CTA principal,
• adaptável a diferentes contêineres/colunas,
• previsível por comportamento (hover, press, foco, menu contextual).

2) Cartão anatomia

1. Área de mídia (capa/logo/suprimento, 16: 9/4: 3/1: 1).

2. Cabeçalho (1-2 linhas truncadas).

3. Metadados (subtítulo, tag/categoria, provedor, tempo).

4. Bage status (novidades, live, promoção, classificação).

5. Ação 100/rápida (botão ou ícone).

6. Texto secundário (curto, 2-3 linhas max).

7. Controladores (favoritos,... contexto).

Hierarquia: cabeçalho de mídia CTA meta secundário. As ações destrutivas estão ocultas ou inseridas no menu.

3) Malhas e disposição

Grid (coluna fixa): 2-6 colunas; adaptando por auto-fit/auto-fill.
Responsive tiles: 'minmax (240px, 1fr)' - os cartões crescem exatamente até os limites.
Masonry/altura variável: cuidado; garantir a ordem de foco e a lisura.
Lista: quando a economia horizontal e a triagem são 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) Densidade e ritmo

Campos/recuos: dentro de 12-16 px; entre os blocos 8-12 px.
Altura da linha: 1. 3–1. 5; fontes: título 16-18 px, meta 12-14 px.
Texto clipping: 'line-clamp: 2-3'; o texto completo é obrigatório em tooltip/detalhes.

5) Estados e interatividade

Hover/Focus/Action: sombra/realce, mas sem «saltos» de layout; ': focus-visível' é sempre visto.
Selectível: checkbox/moldura; não confundir com o cartão de referência.
Pressed: redução de 98% + sombra para baixo (≤ 120 ms).
Busy/Loading: esqueleton, não «vazio».

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) Imagens e mídia

Aspect-ratio é fixo; nas listas de jogos - 16:9 ou 4:3.
Carregamento preguiçoso: 'loading =' lazy '' + 'decoding =' async '.
Playsholder/skeleton com a cor dominante do pôster.
Erro de carregamento: imagem de fachada + ícone «image-off».

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

7) Crachás e marcas

Palavras curtas (1-2): New, Live, -20%, Top 10.
Não pode confiar apenas na cor - adicione um ícone/texto.
Localização: topo esquerdo da mídia; várias em uma pilha com espaço 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 e ação rápida

Um primary por cartão (por exemplo, «Jogar», «Apostar»).
Ícones auxiliares (favoritos, compartilhar,...) - por hover/foco.
Destrutivos - através de confirmação ou painel 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) Disponibilidade (A11y)

Todo o cartão-referência é '<a>' com 'aria-label' claro, senão, o título como referência, o resto como estático.
A ordem do Tab corresponde ao visual; O anel de foco pode ser visto.
Imagens de 'alt'; decoração - 'aria-hidden =' true '.
Para estatais, use 'role =' status '/' aria-live = 'polite'.
Contraste de texto e crachá ≥ AA; Não se trata apenas de cor.

10) Performance

Carregamento preguiçoso de mídia e listas; paginação ou impinit scroll com sensry-observador.
Virtualização para emissões de fita/infinitas (£10k elementos).
Minimize o reflow: Anistie apenas 'trans/opacity'.
Renderize os cartões com esqueletos e substitua o conteúdo após carregar os dados.

11) Esqueletos, erros, vazios

O skeleton repete a estrutura do cartão (mídia/texto/botão), sem um shimmer agressivo; considere «preferers-reduced-motion».
Erro-state: ícone + texto curto («Não foi possível carregar o jogo») + botão Retry.
Empty-state: ícone/ilustração, explicação, «O seguinte» (filtro/pesquisa/assinatura).

12) Gerenciamento de conteúdo

Corte: 'line-clamp' + dicas explícitas (tooltip).
Números/somas longos: Números de tabela: 'fonte-variant-numérico: tabular-nums;'.
Localização: reserva + 20-30% de largura para editoras longas.
Apoio de apoio para flip crachás/ícones e alinhamentos.

13) Tema escuro e contraste

As sombras são mais fracas, use os limites ('1px') com transparência.
Suporte AAA para fontes pequenas; Evite os estranhos.
A mídia é escurecida por um véu fino (overlay 8-12%) para que o texto seja lido.

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) Triagem, filtros, paginação

Barra de filtros superior/lado; o resultado é uma grade de cartões.
A paginação é visível; O scroll infinito é apenas com «De volta para o início» e mantém a posição.
Filtros não «removem» scroll; aplicam-se rapidamente (≤ 100 ms) ou com um indicador.

15) Especificidades iGaming

15. 1 Cartão de jogo (slot/mesa)

Mídia: pôster 16:9, logotipo do provedor.
Metadados: provedor, RTP, volatilidade, categorias (- apenas informação, sem promessas de ganho).
Bage, New, Popular, Turnement, Jackpot.
CTA: «Jogar» + «Demo». O contexto «18 +» e o jogo responsável são visíveis.

15. 2 Cartão de jogo/coeficiente

Crachá ao vivo Live; timer/período.
Coeficientes chave (2-3) com hover/press instantâneo e undo seguro (se permitido).
Atualizações sem parafusos; quando o curso é alterado, realce com cuidado.

15. 3 Cartão do torneio/iventa

Datas, prémios, regras (referência).
Status («Inscrição aberta/encerrada», «Em andamento»).
CTA «Aderir», «Regras»; progresso da participação (pontos/local).

16) Antipattern

Toda a ficha é clicada + dentro de links secundários (armadilhas de foco/clique).
Dois primary-CTA ao lado («Jogar» e «Comprar bônus») - competição de atenção.
Falta de playsholders/esqueletos → grade «saltitante» (CLS).
Efeitos shimmer sem fim; animação sombra/blur (caro).
Metadados «em coluna» cinza em cinza (sem contraste).
Crachás que só transmitem o significado em cores.

17) Sistema de design de tokens (exemplo)

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

React: cartão 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>
);
}

Impinit 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étricas e experiências

CTR primary-CTA и Time-to-Click.
Scroll-depth → click: cliques «acima do dobro »/« abaixo do dobro».
Cartão → exibição de detalhes → conversão.
Visibilidade dos crachás e sua influência na CTR.
Skeleton visible time и CLS.
A/B: tamanho dos cartões, quantidade de metadados, visibilidade de ação rápida, tipo de grade (lista/grid).

20) QA-folha de cheque

Disponibilidade

• Os anéis de foco são visíveis; a ordem de Tab é lógica.
• Os textos alt e 'aria-label' são corretos; Status-crachá com texto.
• Contraste texto/fundo ≥ AA.

Comportamento

• Um primary-CTA; ações rápidas não se sobrepõem ao cenário principal.
• Hover/press/selected são diferentes; o menu contextual funciona.
• Os/erros/esqueletos vazios são corretos; há Retry.

Performance

• Carregamento preguiçoso de mídia; Não há subidas bruscas de layout.
• Virtualização de listas maiores; animação 'transform/opacity'.

Grade

• 'minmax (240px, 1fr)' e 'gap' são adaptáveis; Masonry não quebra o foco/ordem de leitura.
• A localização não «quebra» o corte e os crachás.

21) Documentação em design

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Tocos: raio/sombra/recuo/camadas, cores de crachá, animação.
Pattern: «Um CTA», «Skeleton em vez de spinner», «Impinit scroll + manter a posição».
Do/Don 't galeria: cartão vs sobrecarregado mínimo, «clicado todo cartão» vs itens explícitos.

Resumo curto

Os cartões funcionam quando têm uma hierarquia clara, um CTA principal, condições previsíveis, malhas sustentáveis e respeito pela performance e disponibilidade. Fixe os tocadores e pattern, use esqueletos e downloads preguiçosos, mantenha o conteúdo conciso - e as interfaces de cartas tornam-se rápidas, legíveis e conversíveis, especialmente em cenários de iGaming.