CSS: card

.instui-card · stable — Sebuah wadah permukaan yang menerima konten apa pun.

base adalah permukaan terangkat default. Gunakan nested untuk kartu berpagar di dalam kartu dasar. Padding dan radius sudut menyesuaikan dengan lebar Card itu sendiri; markup warisan tanpa a .content pembungkus menggunakan breakpoint viewport.

Source: card.css

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/components/components.css";

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

Contoh

Kartu kontainer

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Bagian pertama</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Bagian kedua</div>
    </section>
  </div>
</article>

Modifikator

Modifikator	Deskripsi
.-variant-base	Kartu konten standar; anak-anak tidak distilasi. Default ketika tidak ada variant yang disetel.
.-variant-container	Tidak disarankan — use .-variant-nested.
.-variant-content	Tidak disarankan — use .-variant-base.
.-variant-nested	Permukaan hanya-batas untuk kartu di dalam kartu dasar.

Kondisi

Tipe	Kueri	Deskripsi
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Token yang digunakan

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