CSS: card

.instui-card — Bekas permukaan yang menerima kandungan sewenang-wenangnya.

Variant mengawal bagaimana anak terusannya distailkan: content (lalai) meninggalkan mereka tanpa gaya; container menyusunnya sebagai bahagian berbingkai dan berpadding. Padding berskala mengikut lebar paparan dan adalah sama bagi kedua-dua varian. Size adalah sepenuhnya responsif — padding dan jejari sempadan meningkat secara automatik pada 320px (20rem) dan 640px (40rem) melalui kueri media min-width standard; tiada kelas saiz diperlukan. Padankan dengan @pantoken/components untuk tajuk, butang, dan komponen baris lain.

Aksesibiliti

Gunakan <article> sebagai elemen kad apabila kad adalah unit kandungan yang berdiri sendiri; gunakan <section> apabila digolongkan dalam tanda tempat (landmark) yang lebih besar. Dalam -variant-container, utamakan elemen <section> sebagai anak terus supaya setiap kawasan berbingkai membawa makna semantik.

Penggunaan

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

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

Contoh

Kad kandungan

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

Kad bekas

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

Struktur

.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;

Pemodifikasi

Pemodifikasi	Penerangan
.-variant-container	Kad bekas; anak terus menjadi bahagian berbingkai dan berpadding.
.-variant-content	Kad kandungan standard; anak-anak tidak distailkan. Lalai apabila tiada varian ditetapkan.

Syarat

Jenis	Pertanyaan	Penerangan
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Token digunakan

Token	Jenis	Nilai
--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>#	—

Sokongan pelayar

• @scope adalah Baseline 2023 Baru Tersedia; kad akan merosot kepada helaian gaya rata tanpa julat dalam pelayar lama tanpa kehilangan gaya yang kelihatan.

Berkaitan

• heading — Letakkan terus dalam kad atau di dalam seksyen bekas.
• button — Letakkan terus dalam kad atau di dalam seksyen bekas.
• img — Letakkan terus dalam kad sebagai kawasan media.
• badge — Letakkan terus dalam kad sebagai penunjuk status.

Lihat juga

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