CSS: card ​

.instui-card · stable — Un conteneur de surface qui accepte du contenu arbitraire.

base est la surface surélevée par défaut. Utilisez nested pour une carte avec bordure à l'intérieur d'une carte de base. Le rembourrage et les rayons des coins s'adaptent à la largeur de la carte ; le balisage hérité sans une enveloppe .content utilise les points de rupture de la fenêtre d'affichage.

Source: card.css

Accessibilité ​

Use <article> as the card element when the card is a self-contained unit of content; use <section> when grouped within a larger landmark. In -variant-container, prefer <section> elements as direct children so each bordered region carries semantic meaning.

Utilisation ​

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

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

Exemples ​

Carte conteneur

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Première section</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Deuxième section</div>
    </section>
  </div>
</article>

Modificateurs ​

ModificateurDescription
.-variant-baseCarte de contenu standard ; les enfants ne sont pas stylisés. Par défaut quand aucune variante n'est définie.
.-variant-containerObsolète — use .-variant-nested.
.-variant-contentObsolète — use .-variant-base.
.-variant-nestedSurface uniquement bordée pour une carte à l’intérieur d’une carte de base.

Conditions ​

TypeRequêteDescription
container(width >=20rem)—
container(width >=40rem)—
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens consommés ​

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