CSS: card

.instui-card — Rastgele içerik kabul eden bir yüzey kapsayıcısı.

Variant doğrudan çocukların nasıl stil verildiğini kontrol eder: content (varsayılan) onları stilsiz bırakır; container onları kenarlı, dolgulı bölümler halinde yığar. Dolgu görünüm genişliğiyle ölçeklenir ve her iki varyantta da aynıdır. Size tamamen duyarlıdır — dolgu ve kenar-yuvarlama otomatik olarak 320px (20rem) ve 640px (40rem) noktalarında standart min-width medya sorgularıyla artar; herhangi bir boyut sınıfına gerek yoktur. Başlık, düğme ve diğer satır içi bileşenler için @pantoken/components ile eşleştirin.

Erişilebilirlik

<article> öğeyi kart öğesi olarak kullanın; kart kendi içinde bağımsız bir içerik birimi olduğunda; daha büyük bir işaret içinde gruplanmışsa <section> kullanın. -variant-container içinde, tercih olarak doğrudan çocuklar olarak <section> öğelerini kullanın, böylece her kenarlı bölge anlamsal bir anlam taşır.

Kullanım

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

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

Örnekler

İçerik kartı

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

Kapsayıcı kart

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

Yapı

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

Değiştiriciler

Değiştirici	Açıklama
.-variant-container	Kapsayıcı kart; doğrudan çocuklar kenarlı, dolgulu bölümlere dönüşür.
.-variant-content	Standart içerik kartı; çocuklar stilsizdir. Varyant ayarlanmadığında varsayılandır.

Koşullar

Tür	Sorgu	Açıklama
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Tüketilen tokenler

Token	Tür	Değer
--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>#	—

Tarayıcı desteği

• @scope Baseline 2023 Yeni Kullanılabilir olarak mevcuttur; eski tarayıcılarda kart, görünür stile zarar gelmeden kapsam dışı düz bir stil sayfasına geriler.

İlgili

• heading — Kartın içine doğrudan veya bir kapsayıcı bölümün içine yerleştirin.
• button — Kartın içine doğrudan veya bir kapsayıcı bölümün içine yerleştirin.
• img — Kartın içine medya bölgesi olarak doğrudan yerleştirin.
• badge — Kartın içine durum göstergesi olarak doğrudan yerleştirin.

Ayrıca bakınız

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