कार्ड इंटरफ़ेस और दृश्य ब्लॉक
1) कार्ड क्यों
कार्ड मुख्य विशेषताओं और क्रियाओं के साथ एक इकाई (खेल, मैच, एक्शन, लेख) पैक करते हैं। अच्छा कार्ड:- जल्दी से स्कैन किया,
- एक मास्टर CTA देता है,
- विभिन्न कंटेनरों/स्तंभों के लिए अनुकूलित,
- व्यवहार में अनुमानित (होवर, प्रेस, फोकस, संदर्भ मेनू)।
2) एक कार्ड की शारीरिक रचना
न्यूनतम संरचना:1. मीडिया ज़ोन (कवर/लोगो/पूर्वावलोकन, 16: 9/4: 3/1: 1)।
2. हेडर (1-2 काट दी गई लाइनें)।
3. मेटाडेटा (उपशीर्षक, टैग/श्रेणी, प्रदाता, समय)।
4. स्थिति बैज (नया, लाइव, प्रचार, रेटिंग)।
5. CTA/त्वरित क्रियाएँ (बटन या प्रतीक)।
6. द्वितीयक पाठ (छोटी, 2-3 अधिकतम पंक्तियाँ)।
7. नियंत्रण (पसंदीदा,... संदर्भ)।
पदानुक्रम: मीडिया → हेडर → सीटीए → मेटा → माध्यमिक। विनाशकारी क्रियाएं मेनू में छिपी या प्रदर्शित होती हैं।
3) ग्रिड और लेआउट
ग्रिड (निश्चित स्तंभ): 2-6 स्तंभ; ■ ऑटो-फिट/ऑटो-फिल के माध्यम से।
उत्तरदायी टाइलें: 'मिनमैक्स (240px, 1fr)' - कार्ड बिल्कुल सीमाओं तक बढ़ ते हैं।
चिनाई/अलग ऊंचाई: सावधान; फोकस ऑर्डर और पढ़ाई सुनिश्चित क
सूची (एक पंक्ति में): जब क्षैतिज अर्थव्यवस्था और छंटाई महत्वपूर्ण हैं।
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 पीएक्स के अंदर; इकाइयों के बीच 8-12 px।
पंक्ति ऊंचाई: 1। 3–1. 5; फोंट: शीर्षक 16-18 पीएक्स, मेटा 12-14 पीएक्स।
पाठ क्लिपिंग: 'लाइन-क्लैंप: 2-3'; टूलटिप/विवरण में अनिवार्य पूर्ण पाठ।
5) राज्य और अंतर्क्रियाशीलता
होवर/फोकस/सक्रिय: छाया/हाइलाइट, लेकिन बिना लेआउट "जंप"; ': फोकस-दृश्यमान' हमेशा दिखाई देता है।
चयन योग्य: चेकबॉक्स/फ्रेम; एक संदर्भ कार्ड के साथ भ्रमित होने के लिए नहीं।
दबाया गया: 98% + छाया नीचे (≤ 120 ms) तक घटाएँ।
व्यस्त/लोडिंग: कंकाल, "खाली" नहीं।
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) छवियाँ और मीडिया
पहलू-अनुपात तय है; खेलों की सूची में - 16: 9 या 4:3।
आलसी लोडिंग: ' लोडिंग =" आलसी" +' डिकोडिंग =" एसिंक"।
प्रमुख पोस्टर रंग के साथ प्लेसहोल्डर/कंकाल।
लोड हो रही त्रुटि: डमी चित्र + छवि बंद प्रतीक.
html
<img class = "card __ media" src ="..." alt = "Game name" loading =" lazy" onerror =" this. src='/fallback. png'">7) बैज और टैग
लघु (1-2 शब्द): नया, लाइव, -20%, शीर्ष 10।
आप सिर्फ रंग पर भरोसा नहीं कर सकते - एक प्रतीक/पाठ जोड़ें।
स्थान: बाएं शीर्ष मीडिया; कई - 4-6 पीएक्स के अंतर के साथ एक ढेर में।
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) सीटीए और त्वरित कार्रवाई
प्रति कार्ड एक प्राथमिक (उदाहरण के लिए, "प्ले", "बेट")।
सहायक प्रतीक (पसंदीदा, शेयर,...) - होवर/फोकस द्वारा।
विनाशकारी - पुष्टि या पूर्ववत-पैनल के माध्यम से।
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)
पूरा लिंक कार्ड स्पष्ट 'आरिया-लेबल' के साथ '' है, अन्यथा: शीर्षक एक लिंक की तरह है, बाकी स्थिर है।
टैब क्रम दृश्य से मेल खाता है; फोकस रिंग दिखाई दे रही है।
'ऑल्ट' के साथ छवियां; सजावटी -' आरिया-छिपा =" सही"।
स्थितियों के लिए, 'भूमिका = "स्थिति" '/' आरिया-लाइव = "विनम्र" का उपयोग करें।
पाठ और बैज कंट्रास्ट ≥ एए; अर्थ सिर्फ रंग नहीं है।
10) प्रदर्शन
मीडिया और सूचियों का आलसी लोडिंग; संतरी-पर्यवेक्षक के साथ पेगिनेशन या इन्फिनिटिस स्क्रॉलिंग।
टेप/अनंत आउटपुट (। 10k तत्व) के लिए वर्चुअलाइजेशन।
न्यूनतम प्रवाह: एनिमेट सिर्फ 'रूपांतरण/अपारदर्शिता'.
कंकाल के साथ कार्ड रेंडर करें और डेटा लोड करने के बाद सामग्री के साथ बदलें।
11) कंकाल, गलतियाँ, खाली
कंकाल आक्रामक झिलमिलाहट के बिना कार्ड (मीडिया/पाठ/बटन) की संरचना को दोहराता है; 'प्रीफर्स-कम-मोशन' पर विचार करें।
त्रुटि स्थिति: प्रतीक + लघु पाठ ("खेल लोड करने में विफल") + रीट्री बटन.
खाली अवस्था: आइकन/चित्रण, स्पष्टीकरण, "आगे क्या है" (फ़िल्टर/खोज/सदस्यता)।
12) सामग्री प्रबंधन
ट्रंकेशन: 'लाइन-क्लैंप' + स्पष्ट टूलटिप।
लंबी संख्या/योग: तालिका अंक: 'फॉन्ट-वेरिएंट-न्यूमेरिक: टैबुलर-नम्स; '.
स्थानीयकरण: लंबे लेबल के लिए आरक्षित + 20-30% चौड़ाई।
आरटीएल समर्थन: फ्लिप बैज/आइकन और संरेखण।
13) डार्क थीम और कंट्रास्ट
छाया कमजोर हैं, पारदर्शिता के साथ सीमाओं ('1px') का उपयोग करें।
छोटे फोंट के लिए AAA का समर्थन करें; झिलमिलाहट से बचें।
पाठ को पढ़ ने योग्य बनाने के लिए मीडिया को एक पतले घूंघट (ओवरले 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 ms) या संकेतक के साथ लागू किया।
15) iGaming की बारीकियां
15. 1 गेम कार्ड (स्लॉट/टेबल)
मीडिया: 16:9 पोस्टर, प्रदाता लोगो।
मेटाडेटा: प्रदाता, आरटीपी, अस्थिरता, श्रेणियां (- केवल सूचनात्मक, जीतने के वादों के बिना)।
बैज: नया, लोकप्रिय, टूर्नामेंट, जैकपॉट।
सीटीए: "प्ले" + "डेमो। "18 +" और जिम्मेदार खेल का संदर्भ दिखाई दे रहा है।
15. 2 मैच/गुणांक कार्ड
लाइव बैज लाइव; टाइमर/अवधि।
तत्काल होवर/प्रेस और सुरक्षित पूर्ववत (यदि अनुमति दी जाए) के साथ मुख्य गुणांक (2-3)।
फ्लिकर-फ्री अपडेट; जब पाठ्यक्रम बदल रहा है - साफ रोशनी।
15. 3 टूर्नामेंट/इवेंट कार्
दिनांक, पुरस्कार पूल, नियम (लिंक)।
स्थिति (पंजीकरण खुला/बंद, प्रगति में)।
सीटीए "जुड़ें", "नियम"; भागीदारी की प्रगति (अंक/स्थान)।
16) एंटीपैटर्न
पूरा कार्ड द्वितीयक लिंक (फोकस/क्लिक ट्रैप) के अंदर क्लिकेबल + है।
पास में दो प्राथमिक-सीटीए ("प्ले" और "बोनस खरीदें") - ध्यान प्रतियोगिता।
कोई प्लेसहोल्डर्स/कंकाल → जंपिंग ग्रिड (सीएलएस) नहीं।
अंतहीन झिलमिलाहट प्रभाव; छाया एनीमेशन/धब्बा (महंगा)।
ग्रे पर छोटे भूरे रंग में स्तंभ मेटाडेटा (कोई विपरीत नहीं)।
बैज जो केवल रंग में अर्थ व्यक्त करते हैं।
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) स्निपेट्स
प्रतिक्रिया: सार्वभौमिक कार्
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) मेट्रिक्स और प्रयोग
सीटीआर प्राथमिक-सीटीए и टाइम-टू-क्लिक।
स्क्रॉल-डेप्थ → क्लिक करें: "मोड़के नीचे "/" क्लिक करें।
कार्ड → विवरण देखें → रूपांतरण।
बैज की दृश्यता और सीटीआर पर उनका प्रभाव।
कंकाल दिखाई देने वाला समय и सीएलएस।
A/B: कार्ड का आकार, मेटाडेटा की मात्रा, त्वरित क्रियाओं की दृश्यता, ग्रिड का प्रकार (सूची/ग्रिड)।
20) क्यूए चेकलिस्ट
उपलब्धता
- फोकस के छल्ले दिखाई दे रहे हैं; टैब अनुक्रम तार्किक है।
- ऑल्ट-ग्रंथ और 'आरिया-लेबल' सही हैं; पाठ के साथ स्थिति बैज।
- पाठ/पृष्ठभूमि विपरीत ≥ AA।
व्यवहार
- एक प्राथमिक-सीटीए; त्वरित क्रियाएं मुख्य परिदृश्य को ओवरलैप
- होवर/प्रेस/चयनित विशिष्ट; संदर्भ मेनू काम करता है।
- खाली/त्रुटियां/कंकाल सही हैं; वहाँ Retry है।
निष्पादन
- आलसी मीडिया लोडिंग; लेआउट में कोई तेज छलांग नहीं है।
- बड़ी सूचियों का वर्चुअलाइजेशन; 'ट्रांसफॉर्म/अपारदर्शिता' एनिमेशन।
ग्रिड
- 'मिनमैक्स (240px, 1fr)' और 'गैप' अनुकूली हैं; चिनाई फोकस/रीडिंग ऑर्डर को नहीं तोड़ ती है।
- आरटीएल/स्थानीयकरण फसल और बैज को "तोड़" नहीं करता है।
21) डिजाइन प्रणाली में प्रलेखन
: 'कार्ड', 'गेमकार्ड', 'मैचकार्ड', 'टूरिज्म कार्ड', ' बैज', 'कंकाल कार्ड'।
टोकन: त्रिज्या/छाया/इंडेंट/परतें, बैज रंग, एनिमेशन।
पैटर्न: "वन सीटीए", "स्पिनर के बजाय कंकाल", "अनंत स्क्रॉलिंग + बनाए रखने की स्थिति।"
Do/Dont gallery: ओवरलोडेड कार्ड बनाम न्यूनतम, "क्लिकेबल पूरे कार्ड" बनाम स्पष्ट तत्व।
संक्षिप्त सारांश
कार्ड तब काम करते हैं जब उनके पास एक स्पष्ट पदानुक्रम, एक मास्टर सीटीए, पूर्वानुमानित राज्य, स्थिर ग्रिड और प्रदर्शन और पहुंच के लिए सम्मान होता है। टोकन और पैटर्न पर कब्जा करें, कंकाल और आलसी लोडिंग का उपयोग करें, सामग्री को संक्षिप्त रखें - और कार्ड इंटरफेस तेज, पढ़ ने योग्य और रूपांतरण-तैयार हो जाएंगे, विशेष रूप से आईगेमिंग स्क्रिप्ट में।