CSS: card ​

.instui-card — एक सतह कंटेनर जो मनमाना सामग्री स्वीकार करता है.

Variant नियंत्रित करता है कि प्रत्यक्ष बच्चों को कैसे स्टाइल किया जाता है: content (डिफ़ॉल्ट) उन्हें अनस्टाइल्ड छोड़ता है; container उन्हें बॉर्डरयुक्त, पैडेड सेक्शन के रूप में स्टैक करता है। पैडिंग व्यूपोर्ट चौड़ाई के साथ स्केल करता है और दोनों वेरिएंट्स में एक समान है। Size पूरी तरह से उत्तरदायी है — पैडिंग और बॉर्डर-रेडियस स्वचालित रूप से 320px (20rem) और 640px (40rem) पर बढ़ते हैं मानक min-width मीडिया क्वेरीज़ के माध्यम से; किसी साइज क्लास की आवश्यकता नहीं है। हेडिंग, बटन और अन्य इनलाइन कंपोनेंट्स के लिए @pantoken/components के साथ जोड़ी बनाएं।

एक्सेसिबिलिटी ​

जब कार्ड एक स्व-विनिर्धारित कंटेंट यूनिट हो तो कार्ड एलिमेंट के रूप में <article> का उपयोग करें; बड़े लैंडमार्क के भीतर समूहित होने पर <section> का उपयोग करें। -variant-container में, प्रत्यक्ष बच्चों के रूप में <section> तत्वों को प्राथमिकता दें ताकि प्रत्येक बॉर्डर वाला क्षेत्र सेमान्टिक अर्थ रखे।

उपयोग ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

उदाहरण ​

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

html
<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

कंटेनर कार्ड

html
<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

संरचना ​

text
.instui-card
  ‹content›
flowchart TD n0[".instui-card"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-variant-containerकंटेनर कार्ड; प्रत्यक्ष बच्चे बॉर्डरयुक्त, पैडेड सेक्शन्स बन जाते हैं.
.-variant-contentमानक कंटेंट कार्ड; बच्चे अनस्टाइल्ड होते हैं। जब कोई वेरिएंट सेट नहीं होता है तो यह डिफ़ॉल्ट है.

शर्तें ​

प्रकारक्वेरीविवरण
media(min-width: 20rem)—
media(min-width: 40rem)—

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-component-card-background-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-card-border-radius-base-lg<length>1rem
--instui-component-card-border-radius-base-md<length>1rem
--instui-component-card-border-radius-base-sm<length>0.75rem
--instui-component-card-border-radius-nested-lg<length>0.75rem
--instui-component-card-border-radius-nested-md<length>0.5rem
--instui-component-card-border-radius-nested-sm<length>0.5rem
--instui-component-card-nested-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-card-padding-base-lg<length>1.5rem
--instui-component-card-padding-base-md<length>1rem
--instui-component-card-padding-base-sm<length>0.75rem
--instui-component-card-padding-nested-lg<length>1rem
--instui-component-card-padding-nested-md<length>0.75rem
--instui-component-card-padding-nested-sm<length>0.5rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-lg<length>1rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-md<length>0.75rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-sm<length>0.5rem
--instui-component-shared-tokens-stroke-width-sm<length>0.0625rem
--instui-elevation-cardnone | <shadow>#—

ब्राउज़र समर्थन ​

  • @scope Baseline 2023 में नया उपलब्ध है; पुराने ब्राउज़रों में कार्ड बिना दृश्य स्टाइलिंग खोए एक अनस्कोप्ड फ्लैट स्टाइलशीट में डाउनग्रेड हो जाता है.

संबंधित ​

  • heading — कार्ड में सीधे रखें या कंटेनर सेक्शन के अंदर रखें.
  • button — कार्ड में सीधे रखें या कंटेनर सेक्शन के अंदर रखें.
  • img — मीडिया क्षेत्र के रूप में कार्ड में सीधे रखें.
  • badge — स्थिति संकेतक के रूप में कार्ड में सीधे रखें.

इसे भी देखें ​