CSS: card ​

.instui-card — Yon kontenè sifas ki aksepte kontni o aza.

Variant kontwole kijan timoun dirèk yo stilize: content (pa defo) kite yo san estil; container mete yo youn sou lòt kòm seksyon ak fwontyè ak pad. Pad la adapte ak lajè fenèt navigatè a epi li menm pou toude variant yo. Gwosè konplètman reponn — pad ak border-radius ogmante otomatikman nan 320px (20rem) ak 640px (40rem) atravè medya query estanda min-width; pa bezwen klas gwosè. Konbine ak @pantoken/components pou tit, bouton, ak lòt konpozan anliy.

Aksè ​

Sèvi ak <article> kòm eleman kat la lè kat la se yon inite kontni endepandan; sèvi ak <section> lè li gwoupe andedan yon landmark pi gwo. Nan -variant-container, prefere eleman <section> kòm timoun dirèk pou chak rejyon gen yon siyifikasyon semantik.

Itilizasyon ​

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

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

Egzanp ​

Kat kontni

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

Kat kontenè

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

Estrikti ​

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;

Modifikatè ​

ModifikatèDeskripsyon
.-variant-containerKat kontenè; timoun dirèk vin seksyon ak fwontyè ak pad.
.-variant-contentKat kontni estanda; timoun yo pa gen estil. Dèfò lè pa gen okenn variant ki mete.

Kondisyon ​

TipRechèchDeskripsyon
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens konsome ​

TokenTipValè
--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>#—

Sipò navigatè ​

  • @scope se Baseline 2023 Newly Available; kat la degrade nan yon stylesheet plat san eskòp nan navigatè ki pi ansyen san pèdi estil vizib.

Ki gen rapò ​

  • heading — Mete dirèkteman nan kat la oswa anndan yon seksyon kontenè.
  • button — Mete dirèkteman nan kat la oswa anndan yon seksyon kontenè.
  • img — Mete dirèkteman nan kat la kòm yon rejyon medya.
  • badge — Mete dirèkteman nan kat la kòm yon endikatè estati.

Gade tou ​