卡接口和可视块

1）卡片为什么

• 快速扫描，
• 给出一个主要的CTA，
• 适应不同的容器/扬声器，
• 可预测的行为（hover, press,焦点,上下文菜单）。

2）卡片解剖学

1.媒体区（封面/徽标/预览,16：9/4：3/1：1）。

2.标题（截断的1-2行）。

3.元数据（副标题，标签/类别，提供商，时间）。

4.状态徽章（新颖性，现场，促销活动，排名）。

5.STA/快速动作（按钮或图标）。

6.次要文本（简短的2-3行max）。

7.Controlls（当选，……上下文）。

层次结构：媒体→标题→ CTA →元→次要。破坏性行为隐藏或放在菜单上。

3）网格和布局

网格（固定列）：2-6列；通过auto-fit/auto-fill进行适应。
Responsive tiles： "minmax （240 px, 1fr）"-卡片正好增长到极限。
Masonry/高度变化：小心；提供焦点顺序和可读性。
清单（排）：当水平节约和可排序性很重要时。

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）密度和节奏

字段/缩进：12-16 px内部；在8-12 px块之间。
行高度：1。3–1.5;字体：标题16-18 px, meta 12-14 px。
拼写文本："line-clamp： 2-3"；必定是工具/部件中的完整文本。

5）状态和交互性

Hover/Focus/Active：阴影/背光,但不存在"跳跃"布局；'：focus-visible'始终可见。
选择性：支架/框架；不要与参考卡溷淆。
Pressed：减少到98%+阴影（≤ 120毫秒）。
Busy/Loading：骨架而不是"空洞"。

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）图像和媒体

Aspect-ratio严格固定；在游戏列表中-16：9或4：3。
懒惰加载：'loading='lazy'+'decoding='async'。
播放器/骨架具有海报的主要颜色。
下载错误：前置图片+图标"image-off"。

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

7）徽章和标签

短语（1-2字）：New，Live，-20％，前10名。
不能仅仅依靠颜色-添加图标/文本。
位置：媒体左上角；有几个-在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和快速行动

每张卡片有一张小学（例如"播放"，"下注"）。
辅助图标（精选，共享，……）-通过hover/焦点。
破坏性-通过确认或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）可用性（A11y）

整个链接卡是'<a>'，带有清晰的'aria-label'，否则是：标题为链接，其余为静态。
Tab的顺序对应于视觉。焦环是可见的。
带有"alt"的图像；装饰性的-'aria-hidden="true"。
对于状态,请使用'role='status' /'aria-live='polite'。
文本与AA ≥徽章的对比；含义不仅仅是颜色。

10）表演

懒惰地下载媒体和列表；与哨兵观察者进行分区或不定式滚动。
磁带/无限发行虚拟化（± 10k元素）。
最小化reflow：仅使用"转换/opacity"动画。
将卡渲染为骨架,并在下载数据后替换内容。

11）骨架，错误，空白

骨架重复卡的结构（媒体/文本/按钮），没有激进的shimmer；考虑到"prefers-reduced-motion"。
错误状态：图标+简短文本（"无法下载游戏"）+Retry按钮。
Empty-state：图标/插图，说明"接下来要做什么"（过滤器/搜索/订阅）。

12）内容管理

截断："line-clamp"+显式提示（tooltip）。
长数字/总和：表数字：'font-variant-numeric： tabular-nums；'。
本地化：备份+长标签宽度的20-30%。
RTL支持：翻转徽章/图标和对齐。

13）黑暗主题与对比

阴影较弱，使用透明的边界（"1px"）。
支持小字体的AAA；避免闪烁。
媒体被精美的面纱（overlay 8-12％）遮盖，以便阅读文本。

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）排序,过滤器,分离

顶部/侧面过滤器面板；结果是卡片网格。
分割是可见的；无限滚动-只有"回到起点"并保持位置。
过滤器不会"丢弃"滚动。快速应用（≤ 100毫秒）或与指标一起应用。

15） iGaming的细节

15.1张游戏卡（slot/table）

媒体：海报16：9，提供商徽标。
元数据：提供者，RTP，波动，类别（仅提供信息，没有获胜承诺）。
徽章：新，人口，锦标赛，杰克波特。
CTA："播放"+"演示"。"18+"的上下文和负责任的游戏是可见的。

15.2比赛/系数卡

现场直播；计时器/时间段。
关键系数（2-3）具有瞬时散发/散发和安全undo（如果允许）。
无闪烁更新；当课程改变时-整洁的背光。

15.3锦标赛/活动卡

日期，奖金，规则（链接）。
状态（"注册/关闭"，"继续"）。
CTA"加入"，"规则"；参与进展（积分/地点）。

16）反模式

整个卡片在次要链接（焦点/点击陷阱）中是可点击的+。
附近的两个primary-CTA（"播放"和"购买奖金"）是关注的竞争。
缺少播放器/骨架→"跳跃"网格（CLS）。
无限的shimmer效果；影子/blur动画（昂贵）。
元数据"到列"为灰色到灰色（没有对比）。
仅以颜色传达意义的徽章。

17）设计系统令牌（示例）

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： 一张通用卡

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

不定式滚动哨所

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

19）度量与实验

CTR primary-CTA и Time-to-Click.

Scroll-depth →点击：点击："在弯道上"/"弯道下"。
卡片→查看零件→转换。
徽章的可见性及其对CTR的影响。

Skeleton visible time и CLS.

A/B：卡的大小，元数据的数量，快速行动的可见性，网格类型（清单/网格）。

20） QA支票清单

可用性

• 焦环是可见的；Tab顺序是合乎逻辑的。
• Alt文本和"aria-label"是正确的；文本状态徽章。
• AA ≥文本/背景的对比。

行为

• 一个primary-CTA；快速操作不会与主脚本重迭。
• Hover/press/selected是可区分的；上下文菜单工作。
• 空白/错误/骨架是正确的；有一个复古。

表演

• 懒惰的媒体下载；没有突然的布局跳跃。
• 大列表虚拟化；"转换/操作"动画。

网格

• "minmax（240 px，1fr）"和"gap"是适应性的；Masonry不会破坏焦点/阅读顺序。
• RTL/本地化不会"打破"修剪和徽章。

21）设计系统中的文档

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.

令牌：半径/阴影/缩进/图层，徽章颜色，动画。
模式："One CTA"，"Skeleton代替旋转器"，"Infinit-scroll+保持位置"。
Do/Do n't Gallery：超载卡vs最小、"可点击的整张卡片"vs显而易见的元素。

简短摘要

当卡具有明确的层次结构，一个主要的CTA，可预测的状态，稳定的网格以及对表演和可用性的尊重时，卡就可以工作。记录令牌和模式，使用骨架和懒惰的下载，保持内容简洁-卡接口将变得快速，可读和转换，尤其是在iGaming脚本中。