CSS: card ​

.instui-card — Surface-bealje mii boađeha dásisvuođa sisdoallot.

Variantta dálvvoávnnas maid dihto eará máhttuide lea: content (dáidalaš) válddejuvvá unstylenahtta; container skuvlaheapmi doaluid muhto rávkkiid ja paddadusaid. Paddadus skálá geavahit viewport-širbma ja leat sama dáid duahtat varianttain. Vuohta lea čuovvolaš responsiiva — paddadus ja rávkki-radius vuostá álgguheapmái automáhtalaš 320px (20rem) ja 640px (40rem) via standardalaš min-width media-kysymbaldusat; leat eará vuohtaluokka dađistuvvon. Buot oassin bargá @pantoken/components ovddasávnnas headingin, buttonin ja eará inline-komponenttain.

Guhkkinjohka ​

Dál beassat <article> dịđi borramuš-elemenda go borramuš lea álbmotrávttuid sisdoalloin; beassat <section> gos deaivvadus lea gruppejuvvan dihte stuorra landmark. In -variant-container, preferra <section> elementaid dihto máhttuid go buot rávkki regionat leat semantalaš mearkkašupmi.

Buktáhašvuohta ​

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

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

Exempla ​

Sisdoallu borramuš

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

Bealjeborramuš

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

Structura ​

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;

Modifisuvnnat ​

ModifisererDeskripción
.-variant-containerBealjeborramuš; dihto máhttuid leat rávkki, paddada sekšuvnnat.
.-variant-contentStandardalaš sisdoallu borramuš; máhttuid leat unstyled. Dáfusdasa gažaldagain go variantta ii leat sivnut.

Divottat / Kondišuvnnat ​

TypeKysimusDeskripción
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokenat gaskkalit ​

TokenTypeVaššun
--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>#—

Browsera geavahit ​

  • @scope leat Baseline 2023 ovttas borrat; borramuš válddá dieđus-asvuovda flat stylesheet mannéhovdnis nuppi brauzerain in fállat visálaš stylinga loss'a.

Dálkkodat ​

  • heading — Dávjjit dihto borramuš sisdoalu dahje bealje sekšuvnnas.
  • button — Dávjjit dihto borramuš sisdoalu dahje bealje sekšuvnnas.
  • img — Dávjjit dihto borramuš sisdoalu mieddii regiona ráđđehus.
  • badge — Dávjjit dihto borramuš sisdoalu status-meahttunma.

Lihkki sáhttu ​