CSS: card ​

.instui-card — En overfladebeholder, der accepterer vilkårligt indhold.

Variant styrer, hvordan direkte børn styles: content (standard) efterlader dem uformaterede; container stabler dem som afgrænsede, polstrede sektioner. Polstring skalerer med visningsvinduesbredden og er den samme på begge varianter. Størrelse er fuldt responsiv — polstring og border-radius øges automatisk ved 320px (20rem) og 640px (40rem) via standard min-width medieforespørgsler; ingen størrelsesklasse er nødvendig. Kombinér med @pantoken/components til overskrift, knap og andre inline-komponenter.

Tilgængelighed ​

Brug <article> som kort-elementet, når kortet er en selvstændig indholdsblok; brug <section> når det er grupperet inden for et større landemærke. I -variant-container foretrækkes <section> elementer som direkte børn, så hver afgrænsede region får semantisk betydning.

Brug ​

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

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

Eksempler ​

Indholdskort

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

Beholderkort

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;

Modifikatorer ​

ModifikatorBeskrivelse
.-variant-containerBeholderkort; direkte børn bliver afgrænsede, polstrede sektioner.
.-variant-contentStandard indholdskort; børn er uformaterede. Standard når ingen variant er angivet.

Betingelser ​

TypeForespørgselBeskrivelse
media(min-width: 20rem)—
media(min-width: 40rem)—

Forbrugte tokens ​

TokenTypeVærdi
--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>#—

Browserunderstøttelse ​

  • @scope er Baseline 2023 Nyligt Tilgængelig; kortet degraderer til et ikke-scoped fladt stylesheet i ældre browsere uden tab af synlig styling.

Relateret ​

  • heading — Placér direkte i kortet eller inde i en container-sektion.
  • button — Placér direkte i kortet eller inde i en container-sektion.
  • img — Placér direkte i kortet som en medieregion.
  • badge — Placér direkte i kortet som en statusindikator.

Se også ​