CSS: card ​

.instui-card · Ένα κοντέινερ επιφάνειας που δέχεται αυθαίρετο περιεχόμενο.

base είναι η προεπιλεγμένη ανυψωμένη επιφάνεια. Χρησιμοποιήστε nested για μια κάρτα με περίγραμμα μέσα σε μια base κάρτα. Το padding και οι ακτίνες γωνιών κλιμακώνονται με το ίδιο το πλάτος της Card· η παλαιά σήμανση χωρίς έναν .content wrapper χρησιμοποιεί σημεία διακοπής του viewport.

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)—

Καταναλωμένα tokens ​

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>#—