CSS: card ​

.instui-card — Wadah permukaan yang menerima konten arbitrer.

Variant mengontrol bagaimana anak langsung distilasi: content (default) membiarkan mereka tanpa gaya; container menyusunnya sebagai bagian-bagian berpagar dan diberi padding. Padding meningkat seiring lebar viewport dan sama di kedua varian. Size sepenuhnya responsif — padding dan border-radius meningkat otomatis pada 320px (20rem) dan 640px (40rem) melalui kueri media standar min-width; tidak diperlukan kelas ukuran. Gabungkan dengan @pantoken/components untuk heading, tombol, dan komponen inline lainnya.

Aksesibilitas ​

Gunakan <article> sebagai elemen kartu ketika kartu adalah unit konten yang berdiri sendiri; gunakan <section> ketika dikelompokkan dalam landmark yang lebih besar. Dalam -variant-container, utamakan elemen <section> sebagai anak langsung sehingga setiap daerah berpagar memiliki makna semantik.

Penggunaan ​

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

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

Contoh ​

Kartu konten

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

Kartu kontainer

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

Struktur ​

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;

Modifikator ​

ModifikatorDeskripsi
.-variant-containerKartu kontainer; anak langsung menjadi bagian berpagar dan diberi padding.
.-variant-contentKartu konten standar; anak-anak tidak distilasi. Default ketika tidak ada variant yang disetel.

Kondisi ​

TipeKueriDeskripsi
media(min-width: 20rem)—
media(min-width: 40rem)—

Token yang digunakan ​

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

Dukungan peramban ​

  • @scope adalah Baseline 2023 yang Baru Tersedia; kartu akan menurun menjadi stylesheet datar tak-bercakupan di peramban lama tanpa kehilangan gaya yang terlihat.

Terkait ​

  • heading — Tempatkan langsung di kartu atau di dalam bagian kontainer.
  • button — Tempatkan langsung di kartu atau di dalam bagian kontainer.
  • img — Tempatkan langsung di kartu sebagai region media.
  • badge — Tempatkan langsung di kartu sebagai indikator status.

Lihat juga ​