CSS: card

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

Variant ελέγχει πώς στιλιζάρονται τα άμεσα παιδιά: content (προεπιλογή) τα αφήνει αστιλιζαρισμένα· container τα στοίχιζει ως περιοχές με περίγραμμα και padding. Το padding κλιμακώνεται με το πλάτος του viewport και είναι το ίδιο και για τις δύο παραλλαγές. Η Size είναι πλήρως ευαίσθητη — το padding και το border-radius αυξάνονται αυτόματα στα 320px (20rem) και 640px (40rem) μέσω των τυπικών min-width media queries· δεν απαιτείται κλάση μεγέθους. Συνδυάζεται με @pantoken/components για επικεφαλίδα, κουμπί και άλλα inline components.

Προσβασιμότητα

Χρησιμοποιήστε <article> ως το στοιχείο κάρτας όταν η κάρτα είναι αυτόνομη μονάδα περιεχομένου· χρησιμοποιήστε <section> όταν ομαδοποιείται εντός ενός μεγαλύτερου τοπικού σημείου αναφοράς. Σε -variant-container, προτιμήστε στοιχεία <section> ως άμεσα παιδιά ώστε κάθε περιοχή με περίγραμμα να έχει σημασιολογικό νόημα.

Χρήση

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

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

Παραδείγματα

Κάρτα περιεχομένου

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

Κοντέινερ κάρτας

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

Δομή

.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	Κοντέινερ κάρτας· τα άμεσα παιδιά γίνονται περιοχές με περίγραμμα και padding.
.-variant-content	Τυπική κάρτα περιεχομένου· τα παιδιά δεν έχουν στυλ. Προεπιλογή όταν δεν έχει οριστεί παραλλαγή.

Συνθήκες

Τύπος	Ερώτημα	Περιγραφή
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-card	none | <shadow>#	—

Υποστήριξη προγράμματος περιήγησης

• @scope είναι Baseline 2023 Newly Available· η κάρτα υποβαθμίζεται σε ένα μη-εμβαπτισμένο flat stylesheet σε παλαιότερους περιηγητές χωρίς απώλεια ορατού στυλ.

Σχετιζόμενα

• heading — Τοποθετήστε απευθείας στην κάρτα ή μέσα σε τμήμα κοντέινερ.
• button — Τοποθετήστε απευθείας στην κάρτα ή μέσα σε τμήμα κοντέινερ.
• img — Τοποθετήστε απευθείας στην κάρτα ως περιοχή μέσου.
• badge — Τοποθετήστε απευθείας στην κάρτα ως δείκτη κατάστασης.

Δείτε επίσης

• https://drafts.csswg.org/css-cascade-6/#scoping