CSS: card

.instui-card · stable — Een oppervlaktecontainer die willekeurige inhoud accepteert.

base is de standaard verhoogde oppervlakte. Gebruik nested voor een kaart met rand binnen een basiskaart. Padding en hoekradius schalen met de eigen breedte van de Card; verouderde markup zonder een .content wrapper gebruikt viewport-breakpoints.

Source: card.css

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/components/components.css";

@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

Voorbeelden

Containermkaart

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Eerste sectie</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Tweede sectie</div>
    </section>
  </div>
</article>

Modifiers

Modifier	Beschrijving
.-variant-base	Standaard inhoudskaart; kinderen zijn ongestyled. Standaard wanneer geen variant is ingesteld.
.-variant-container	Verouderd — use .-variant-nested.
.-variant-content	Verouderd — use .-variant-base.
.-variant-nested	Oppervlak met alleen rand voor een kaart binnen een basiskaart.

Voorwaarden

Type	Zoekopdracht	Beschrijving
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Gebruikte tokens

Token	Type	Waarde
--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>#	—