CSS: card ​

.instui-card — Een oppervlakcontainer die willekeurige inhoud accepteert.

Variant bepaalt hoe directe kinderen worden gestyled: content (standaard) laat ze ongestyled; container stapelt ze als begrensde, met padding voorziene secties. De padding schaalt met de viewport-breedte en is in beide varianten hetzelfde. Grootte is volledig responsief — padding en border-radius verhogen automatisch bij 320px (20rem) en 640px (40rem) via standaard min-width media queries; er is geen grootteklasse nodig. Combineer met @pantoken/components voor koppen, knoppen en andere inline-componenten.

Toegankelijkheid ​

Gebruik <article> als het kaart-element wanneer de kaart een op zichzelf staande inhoudseenheid is; gebruik <section> wanneer deze gegroepeerd is binnen een groter landmerk. In -variant-container, geef de voorkeur aan <section>-elementen als directe kinderen zodat elke begrensde regio semantische betekenis draagt.

Gebruik ​

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

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

Voorbeelden ​

Inhoudskaart

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

Containermkaart

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

Structuur ​

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;

Modifiers ​

ModifierBeschrijving
.-variant-containerContainerkaart; directe kinderen worden begrensde, met padding voorziene secties.
.-variant-contentStandaard inhoudskaart; kinderen zijn ongestyled. Standaard wanneer geen variant is ingesteld.

Voorwaarden ​

TypeZoekopdrachtBeschrijving
media(min-width: 20rem)—
media(min-width: 40rem)—

Gebruikte tokens ​

TokenTypeWaarde
--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>#—

Browserondersteuning ​

  • @scope is Baseline 2023 Nieuw Beschikbaar; de kaart degradeert naar een niet-gescopeerde platte stylesheet in oudere browsers zonder verlies van zichtbare styling.

Gerelateerd ​

  • heading — Plaats direct in de kaart of binnen een containersectie.
  • button — Plaats direct in de kaart of binnen een containersectie.
  • img — Plaats direct in de kaart als een mediaregio.
  • badge — Plaats direct in de kaart als een statusindicator.

Zie ook ​