कार्ड बनाना

खास जानकारी

कार्ड में, मिलते-जुलते कॉन्टेंट या किसी विकल्प को ग्रुप किया जाता है. यह एक विज़ुअल पैटर्न है, न कि कोई तय सिमैंटिक या इंटरैक्शन मॉडल. इसलिए, कॉन्टेंट का मतलब बनाए रखें और उसके मकसद से मैच करने वाले नेटिव इंटरैक्शन का इस्तेमाल करें.

दिशा-निर्देश

कॉन्टेंट और उसके इंटरैक्शन के लिए, अलग-अलग सिमैंटिक चुनें:

• कार्ड रूट के तौर पर <article> का इस्तेमाल करें, भले ही वह किसी डेस्टिनेशन से लिंक हो या न हो;
• नेविगेशन के लिए नेटिव लिंक का इस्तेमाल करें. जब पूरा कार्ड एक डेस्टिनेशन हो, तो एक लिंक <article> को सिर्फ़ तब रैप कर सकता है, जब कार्ड में कोई अन्य इंटरैक्टिव एलिमेंट (a, button, input, select, textarea) न हो;
• अलग-अलग कार्रवाइयों के लिए लिंक और बटन को अलग-अलग नेटिव कंट्रोल के तौर पर रखें;
• जब कार्ड एक विकल्प के तौर पर उपलब्ध हो, तो उससे जुड़े <label> के साथ रेडियो बटन या चेकबॉक्स का इस्तेमाल करें. इसके अलावा, नेटिव <select> में option का इस्तेमाल करें.

मीडिया, टाइटल, काम के कॉन्टेंट, और कार्रवाइयों को सही सोर्स ऑर्डर में रखें. इसके उलट, सीएसएस order का इस्तेमाल न करें. ज़्यादा जानकारी के लिए, सीएसएस लेआउट और रिस्पॉन्सिव डिज़ाइन देखें.

लागू करना

मार्कअप को कम से कम रखें और सीएसएस सिलेक्टर को हर क्षेत्र की पहचान करने दें. इससे सामान्य कार्ड सामान्य बने रहते हैं और रिच कार्ड भी बनाए जा सकते हैं. किसी कार्ड में ज़्यादा से ज़्यादा चार सेक्शन हो सकते हैं. ये सेक्शन, सोर्स के इस क्रम में होते हैं. इनमें से किसी भी सेक्शन को हटाया जा सकता है. रीजन, कार्ड के डायरेक्ट चाइल्ड होते हैं. इन्हें .card__body जैसे रैपर एलिमेंट में ग्रुप नहीं किया जाता. इससे सिलेक्टर के हिसाब से रीजन को प्लेस और स्टाइल करने से रोका जाता है. सिर्फ़ एक एलिमेंट वाले रीजन में, वह एलिमेंट ही होता है. उसे रैप नहीं किया जाता: एक पैराग्राफ़, <p> होता है. रैपर का इस्तेमाल सिर्फ़ तब करें, जब किसी सेक्शन में कई एलिमेंट हों.

• मीडिया: पहले चाइल्ड के तौर पर <img>, <picture>, <video> या <svg>. .media क्लास को सिर्फ़ ऐसे आर्बिट्रेरी हीरो कॉन्टेंट में जोड़ें जो उन एलिमेंट में से एक न हो. साथ ही, किसी सामान्य <img> को कभी भी .media एलिमेंट में रैप न करें.
• हेडर: यह अपने-आप में एक हेडिंग होती है. <hgroup> का इस्तेमाल सिर्फ़ तब करें, जब हेडिंग में कोई सबटाइटल या टैगलाइन हो. वहीं, <header> का इस्तेमाल तब करें, जब सेक्शन में टाइटल के अलावा, बायलाइन या बैज जैसी ज़्यादा जानकारी हो. जब कार्ड में कोई मुख्य डेस्टिनेशन होता है, तो लिंक हेडिंग के अंदर चला जाता है.
• कॉन्टेंट: एक <p>, <ul> या <dl> अपने-आप में पूरा होता है. जब कॉन्टेंट में कई एलिमेंट हों, जैसे कि कई पैराग्राफ़ या एक पैराग्राफ़ और एक सूची, तो उन्हें एक <div> में ग्रुप करें, ताकि वह हिस्सा एक ग्रिड आइटम बन जाए.
• फ़ुटर: यह एक <footer> है, जिसमें नेटिव लिंक और बटन के तौर पर अलग-अलग कार्रवाइयां शामिल होती हैं. "ज़्यादा पढ़ें" लिंक, हेडिंग लिंक के यूआरएल को शेयर कर सकता है. हालांकि, इसे ऐक्सेस किया जा सकने वाला ऐसा नाम दें जिसमें जानकारी शामिल हो और जो दिखने वाले टेक्स्ट से शुरू होता हो. इसके लिए, विज़ुअल तौर पर छिपे हुए टेक्स्ट का इस्तेमाल करें. उदाहरण के लिए, Read more<span> about poached eggs</span>. ऐसा इसलिए, क्योंकि एक जैसे "ज़्यादा पढ़ें" लिंक, स्क्रीन रीडर की लिंक सूची में साफ़ तौर पर नहीं दिखते. फ़ुटर में ऐसे अन्य लिंक न जोड़ें जो हेडिंग के यूआरएल को दोहराते हों.

सबसे आसान कार्ड <article> होता है, जिसमें एक हेडिंग और एक पैराग्राफ़ होता है. कार्ड के व्यवहार से मैच करने वाला लिंक और ऐक्शन पैटर्न चुनें. इंटरैक्शन मॉडल देखें.

कार्ड की इमेज या वीडियो के लिए, तय किए गए अनुपात वाले एरिया को भरने के लिए, <img> या <video> पर ही aspect-ratio और object-fit: cover सेट करें. इससे, एरिया बिना किसी गड़बड़ी के भर जाता है. हालांकि, ऐसा हो सकता है कि इमेज या वीडियो को काटना पड़े. .media कंटेनर के aspect-ratio का इस्तेमाल, सिर्फ़ अन्य हीरो कॉन्टेंट के लिए करें. अगर ऐसा नहीं है, तो मीडिया के मूल अनुपात को बनाए रखें. जानकारी देने वाली इमेज के लिए, सही वैकल्पिक टेक्स्ट दें. सजावटी इमेज के लिए, alt="" का इस्तेमाल करें.

उपलब्ध स्टोरेज के हिसाब से अडजस्ट करना

लेआउट को व्यूपोर्ट के बजाय, कार्ड में उपलब्ध जगह के हिसाब से बनाएं. कार्ड के डिसेंडेंट (मीडिया, टेक्स्ट, ऐक्शन) को अडैप्ट करने के लिए, कार्ड को साइज़ कंटेनर (container-type: inline-size) बनाएं और उसके चिल्ड्रन के लिए @container नियम लिखें. ग्रिड या सूची के पैरंट के हिसाब से साइज़ तय करने से बचें: कार्ड की असल चौड़ाई, कॉलम की संख्या, गैप वगैरह पर निर्भर कर सकती है. इससे पैरंट-आधारित ब्रेकपॉइंट में गड़बड़ी हो सकती है.

छोटे कंटेनर में, सोर्स के क्रम में क्षेत्रों को स्टैक करें. चौड़े कंटेनर में, मीडिया को अन्य क्षेत्रों के बगल में मौजूद साइड कॉलम में रखें. हालांकि, ऐसा सिर्फ़ उन कार्ड के लिए करें जिनमें मीडिया मौजूद है: उन नियमों को मीडिया चाइल्ड (उदाहरण के लिए, .card:has(> img)) पर :has() के साथ लागू करें, ताकि कॉलम की परिभाषाएं और grid-column प्लेसमेंट, बिना मीडिया वाले कार्ड पर कभी लागू न हों. बिना मीडिया वाले कार्ड की चौड़ाई चाहे जो भी हो, वह हमेशा एक कॉलम में ही रहता है. साथ ही, उसमें मीडिया के लिए कोई खाली कॉलम नहीं होना चाहिए.

कार्ड को ग्रिड में अलाइन करना

जब किसी लाइन में मौजूद कार्ड को अपने सेक्शन की ऊंचाई शेयर करनी हो, तो subgrid का इस्तेमाल करें: हर कार्ड को चार शेयर किए गए लाइन ट्रैक (मीडिया, हेडर, कॉन्टेंट, फ़ुटर) में बांटें और एलिमेंट सिलेक्टर के हिसाब से सेक्शन रखें. साथ ही, मीडिया, हेडिंग या <footer> के अलावा, बाकी सभी चीज़ों को कॉन्टेंट के तौर पर इस्तेमाल करें. जिस कार्ड में कोई क्षेत्र शामिल नहीं किया जाता है उसका ट्रैक खाली रहता है. इसलिए, बाकी क्षेत्र अब भी आस-पास के कार्ड के साथ अलाइन रहते हैं. हर ट्रैक में एक ग्रिड आइटम होता है. इसलिए, कॉन्टेंट वाले हिस्से को <div> में सिर्फ़ तब रैप करें, जब उसमें एक से ज़्यादा एलिमेंट हों और कार्ड, ट्रैक शेयर करते हों. ऐसे कार्ड जो सिबलिंग के साथ अलाइन नहीं हैं उन्हें न तो रैपर की ज़रूरत होती है और न ही सबग्रिड की.

इंटरैक्शन मॉडल

कॉन्टेंट कार्ड

कार्ड रूट के तौर पर <article> का इस्तेमाल करें. लिंक और बटन को अलग-अलग नेटिव कंट्रोल के तौर पर रखें.

एक मंज़िल वाले कार्ड

जब पूरा कार्ड एक ही डेस्टिनेशन हो और उसमें कोई अलग कार्रवाई न हो, तो एक नेटिव लिंक का इस्तेमाल करें. लिंक, <article> को रैप कर सकता है. लिंक के अंदर अन्य लिंक, बटन या फ़ॉर्म कंट्रोल को नेस्ट न करें. साथ ही, "ज़्यादा पढ़ें" टेक्स्ट को सामान्य <p> या <span> रखें. लिंक का ऐक्सेस किया जा सकने वाला नाम, कार्ड का पूरा टेक्स्ट होता है. इसलिए, कॉन्टेंट को छोटा रखें. अगर कार्ड में बहुत सारा टेक्स्ट या अन्य कार्रवाइयां हैं, तो नीचे दिए गए स्ट्रेच्ड-लिंक पैटर्न का इस्तेमाल करें, ताकि सिर्फ़ हेडिंग ही लिंक हो:

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

क्लिक किए जा सकने वाले कार्ड, जिनमें अलग-अलग कार्रवाइयां की जा सकती हैं

अगर कार्ड पर क्लिक करने से, नेविगेट करने के बजाय कोई कार्रवाई ट्रिगर होती है, तो लिंक के बजाय <button> का इस्तेमाल करें.

जब कोई कॉन्टेंट कार्ड किसी मुख्य डेस्टिनेशन से लिंक होता है, उसमें अन्य इंटरैक्टिव एलिमेंट भी होते हैं, और उसे पूरी तरह से क्लिक करने लायक बनाना होता है:

• मुख्य लिंक पर ही, सिंगल ऑप्ट-इन का इस्तेमाल करें: हर कार्ड के सिर्फ़ एक लिंक (हेडिंग लिंक) पर .card-link डालें. फ़ुटर और अन्य लिंक को कभी भी यह नहीं मिलता. इसके अलावा, हर लिंक अपना ओवरले बढ़ाएगा और आखिरी लिंक पूरे कार्ड को कैप्चर कर लेगा.
• इसके टाइटल को लिंक करें और ::after की मदद से, पॉइंटर हिट एरिया को पूरे कार्ड पर फैलाएं

.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

• इंटरैक्टिव एलिमेंट को position: relative; z-index: 1 से ऊपर रखें, ताकि वे काम करते रहें. एलिमेंट के टारगेट टाइप (जैसे, a, button) का इस्तेमाल करें. क्लास के ज़रिए शामिल होने की ज़रूरत नहीं है.
• पूरे कंटेनर पर z-index लागू न करें. ऐसा करने से, वे ऐसे पॉइंटर इवेंट कैप्चर करेंगे जिनसे कोई कार्रवाई नहीं होती.

.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}

• स्ट्रेच किए गए लिंक के बजाय, कर्सर घुमाने/फ़ोकस करने पर कार्ड को ही स्टाइल करें:

.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

चॉइस कार्ड

पहले से तय विकल्पों को दिखाने वाले कार्ड के लिए, <label class="card"> का इस्तेमाल करें. साथ ही, इसमें चेकबॉक्स या रेडियो बटन को डायरेक्ट चाइल्ड के तौर पर इस्तेमाल करें.

:has(:checked) की मदद से, चुने गए कार्ड को स्टाइल करें. किसी कार्ड को चुनने पर, लेआउट पर असर डालने वाली प्रॉपर्टी, जैसे कि border-width, padding या font-weight को कभी न बदलें. ऐसा करने से, कार्ड और उसके आस-पास के कार्ड जंप करते हैं. कार्ड को हाइलाइट करने के लिए, outline, box-shadow या पारदर्शी बॉर्डर का इस्तेमाल करें, जो सिर्फ़ रंग बदलता है:

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

दिखने वाला चेकबॉक्स या रेडियो बटन, चुने गए विकल्प का ऐसा इंडिकेटर होता है जिसमें रंग का इस्तेमाल नहीं किया जाता. इसलिए, सिर्फ़ रंग बदलना ही काफ़ी है. अगर कंट्रोल विज़ुअल तौर पर छिपा हुआ है, तो बिना रंग वाला ऐसा इंडिकेटर जोड़ें जिससे लेआउट पर असर न पड़े. जैसे, सही का निशान वाला आइकॉन या मोटा outline. हालांकि, इसे फ़ोकस करने लायक और सुलभता ट्री में रखें, कभी भी display: none न करें.

जब विकल्प किसी ड्रॉपडाउन पिकर में हों और उसके विकल्प कार्ड के तौर पर दिखाए गए हों, तब <div> कार्ड से चुनने के बजाय, appearance: base-select के साथ नेटिव <select> और स्टाइल ::picker(select) और <option> एलिमेंट का इस्तेमाल करें; ज़्यादा जानकारी और फ़ॉलबैक के लिए, कस्टम सेलेक्ट पिकर लेआउट देखें.