Kartenschnittstelle und visuelle Blöcke

1) Warum Karten

• schnell gescannt,
• gibt einen Haupt-CTA,
• passt sich verschiedenen Behältern/Säulen an,
• vorhersehbar durch Verhalten (Hover, Presse, Fokus, Kontextmenü).

2) Anatomie der Karte

1. Medienbereich (Cover/Logo/Vorschau, 16: 9/4: 3/1: 1).

2. Titel (1-2 abgeschnittene Zeilen).

3. Metadaten (Untertitel, Tag/Kategorie, Anbieter, Uhrzeit).

4. Statusabzeichen (neu, live, Promotion, Bewertung).

5. STA/schnelle Aktionen (Schaltfläche oder Symbole).

6. Sekundärer Text (kurz, 2-3 Zeilen max).

7. Kontrollen (Favoriten,... Kontext).

Hierarchie: Medien → Titel → CTA → Meta → Sekundär. Destruktive Handlungen werden versteckt oder im Menü aufgeführt.

3) Raster und Layouts

Raster (feste Spalte): 2-6 Spalten; adaptiw durch auto-fit/auto-fill.
Responsive tiles: 'minmax (240px, 1fr)' - die Karten wachsen genau bis zu den Grenzen.
Masonry/variable Höhe: Vorsicht; Fokusordnung und Lesbarkeit gewährleisten.
Liste (in einer Reihe): wenn horizontale Einsparungen und Sortierbarkeit wichtig sind.

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) Dichte und Rhythmus

Felder/Einzüge: innen 12-16 px; zwischen den Blöcken 8-12 px.
Zeilenhöhe: 1. 3–1. 5; Schriftarten: Header 16-18 px, Meta 12-14 px.
Clipping des Textes: 'line-clamp: 2-3'; unbedingt Volltext in Tooltip/Details.

5) Zustände und Interaktivität

Hover/Focus/Active: Schatten/Highlight, aber keine „Sprünge“ des Layouts;': focus-visible' immer sichtbar.
Wählbar: Checkbox/Rahmen; Nicht zu verwechseln mit der Referenzkarte.
Pressed: Reduzierung auf 98% + Schatten nach unten (≤ 120 ms).
Busy/Loading: Skeleton, nicht „leer“.

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) Bilder und Medien

Aspect-ratio ist fest; auf den Spiellisten stehen 16:9 oder 4: 3.
Lazy Loading: 'loading =' lazy''+ 'decoding =' async'.
Platzhalter/Skeleton mit dominanter Posterfarbe.
Upload-Fehler: Standbild + Symbol „image-off“.

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

7) Abzeichen und Tags

Kurz (1-2 Wörter): Neu, Live, -20%, Top 10.
Sie können sich nicht nur auf die Farbe verlassen - fügen Sie ein Symbol/Text hinzu.
Ort: links oben Medien; mehrere - in einem Stapel mit einem Abstand von 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 und schnelles Handeln

Ein Primary pro Karte (z.B. „Spielen“, „Setzen“).
Hilfssymbole (Favoriten, teilen,...) - durch hover/Fokus.
Destruktiv - durch Bestätigung oder Undo-Panel.

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) Verfügbarkeit (A11y)

Die gesamte Linkkarte ist'<a> 'mit dem verständlichen' aria-label', ansonsten: Titel als Link, der Rest ist statisch.
Die Tab-Reihenfolge entspricht der visuellen; Der Fokusring ist sichtbar.
Bilder mit 'alt'; dekorativ - „aria-hidden =“ true „“.
Verwenden Sie für Status' role = 'status' '/' aria-live = 'polite'.
Kontrast von Text und Abzeichen ≥ AA; Bedeutung ist nicht nur Farbe.

10) Performance

Faules Laden von Medien und Listen; Pagination oder Infinit-Scrolling mit einem Sentry-Beobachter.
Virtualisierung für Band/unendliche Ausgaben (± 10k Elemente).
Reflow minimieren: Animiere nur 'transform/opacity'.
Rendern Sie die Karten mit Skeletten und ersetzen Sie sie nach dem Hochladen der Daten durch Inhalte.

11) Skeletons, Fehler, leer

Skeleton wiederholt die Struktur der Karte (Medien/Text/Button), ohne aggressiven Schimmer; Beachten Sie „prefers-reduced-motion“.
Fehlerstatus: Symbol + kurzer Text („Das Spiel konnte nicht geladen werden“) + Retry-Taste.
Leer-Zustand: Symbol/Illustration, Erklärung, „Was kommt als nächstes“ (Filter/Suche/Abonnements).

12) Content Management

Abkürzung: 'line-clamp' + explizite Hinweise (tooltip).
Lange Zahlen/Summen: tabellarische Zahlen: „font-variant-numeric: tabular-nums;“.
Lokalisierung: Reserve + 20-30% Breite für lange Etiketten.
RTL-Unterstützung: Flip Abzeichen/Symbole und Ausrichtung.

13) Dunkles Thema und Kontrast

Schatten sind schwächer, verwenden Sie Rahmen ('1px') mit Transparenz.
AAA für kleine Schriftarten unterstützen; Vermeiden Sie Flimmern.
Die Medien werden durch einen dünnen Schleier (Overlay 8-12%) verdunkelt, um den Text lesbar zu machen.

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) Sortieren, Filtern, Paginieren

Filterplatte oben/seitlich; das Ergebnis ist ein Kartenraster.
Die Pagination ist sichtbar; endloses Scrollen - nur mit „Zurück zum Anfang“ und Beibehaltung der Position.
Die Filter „setzen“ das Scrolling nicht zurück; schnell (≤ 100 ms) oder mit Indikator angewendet.

15) Besonderheiten von iGaming

15. 1 Spielkarte (Slot/Tisch)

Medien: 16: 9-Plakat, Anbieterlogo.
Metadaten: Anbieter, RTP, Volatilität, Kategorien (- nur informativ, keine Gewinnversprechen).
Abzeichen: Neu, Beliebt, Turnier, Jackpot.
CTA: „Play“ + „Demo“. Der „18 +“ -Kontext und das verantwortungsvolle Spielen sind sichtbar.

15. 2 Match-/Quotenkarte

Live-Abzeichen Live; Timer/Zeitraum.
Schlüsselfaktoren (2-3) mit sofortigem Hover/Press und sicherem Undo (falls zugelassen).
Flimmerfreie Updates; Wenn Sie den Kurs ändern - ordentliche Beleuchtung.

15. 3 Turnier-/Eventkarte

Termine, Preispool, Regeln (Link).
Status („Registrierung offen/geschlossen“, „in Arbeit“).
CTA „Join“, „Rules“; Teilnahmefortschritt (Punkte/Platz).

16) Antipatterns

Die gesamte Karte ist anklickbar + innerhalb der Sekundärlinks (Fokus-/Klickfallen).
Zwei primary-CTAs nebeneinander („Play“ und „Buy Bonus“) - Aufmerksamkeitswettbewerb.
Kein Platzhalter/Skeleton → „springendes“ Netz (CLS).
Unendliche Shimmer-Effekte; Schattenanimation/blur (teuer).
Metadaten „in die Spalte“ in feinem Grau auf Grau (kein Kontrast).
Abzeichen, die nur mit Farbe Bedeutung vermitteln.

17) Design System Token (Beispiel)

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: Universalkarte

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-Scrolling-Funktion

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

19) Metriken und Experimente

CTR primary-CTA и Time-to-Click.
Scroll-Tiefe → Klick: Klicks „über der Biegung “/„ unter der Biegung“.
Karte → Anzeigen von Details → Konvertierung.
Sichtbarkeit von Abzeichen und ihre Auswirkungen auf die CTR.
Skeleton visible time и CLS.
A/B: Kartengröße, Anzahl der Metadaten, Sichtbarkeit schneller Aktionen, Rastertyp (Liste/Raster).

20) QS-Checkliste

Fassbarkeit

• Fokusringe sind sichtbar; Die Tab-Reihenfolge ist logisch.
• Alt-Texte und 'aria-label' sind korrekt; Status-Abzeichen mit Text.
• Text/Hintergrund-Kontrast ≥ AA.

Verhalten

• Ein primary-CTA; Schnelle Aktionen überlappen nicht das Hauptszenario.
• Hover/press/selected sind unterscheidbar; Das Kontextmenü funktioniert.
• Leere/Fehler/Skeletons sind korrekt; Es gibt Retry.

Leistung

• Lazy Media Download; keine abrupten Layoutsprünge.
• Virtualisierung großer Listen; Animationen 'transform/opacity'.

Raster

• „minmax (240px, 1fr)“ und „gap“ sind adaptiv; Masonry bricht den Fokus/die Leserichtung nicht.
• RTL/Lokalisierung „brechen“ nicht Trimmen und Abzeichen.

21) Dokumentation im Konstruktionssystem

Компоненты: `Card`, `GameCard`, `MatchCard`, `TournamentCard`, `StatusBadge`, `SkeletonCard`.
Token: Radius/Schatten/Einzüge/Ebenen, Abzeichenfarben, Animationen.
Muster: „Ein CTA“, „Skeleton statt Spinner“, „Infinit-Scrolling + Positionserhaltung“.
Do/Don 't-gallery: überladene Karte vs minimal, „klickbare ganze Karte“ vs explizite Elemente.

Kurze Zusammenfassung

Karten funktionieren, wenn sie eine klare Hierarchie, einen Master-CTA, vorhersehbare Zustände, stabile Gitter und Respekt für Leistung und Verfügbarkeit haben. Erfassen Sie Token und Muster, verwenden Sie Skeletons und faule Downloads, halten Sie Inhalte prägnant - und Kartenschnittstellen werden schnell, lesbar und konvertierbar, insbesondere in iGaming-Szenarien.