CSS: card ​

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

base डिफ़ॉल्ट उभरी हुई सतह है। बेस कार्ड के अंदर एक बॉर्डर वाला कार्ड बनाने के लिए nested का उपयोग करें। पैडिंग और कोने के रेडियस कार्ड की अपनी चौड़ाई के साथ स्केल होते हैं; लेगसी मार्कअप जिसमें .content रैपर नहीं होता है, वह व्यूपोर्ट ब्रेकपॉइंट्स का उपयोग करता है।

Source: card.css

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

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

उपयोग ​

@import "@pantoken/components/components.css";

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

उदाहरण ​

कंटेनर कार्ड

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">पहला अनुभाग</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">दूसरा अनुभाग</div>
    </section>
  </div>
</article>

मॉडिफायर ​

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

शर्तें ​

प्रकारक्वेरीविवरण
container(width >=20rem)—
container(width >=40rem)—
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>#—