CSS: card ​

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

Variant contrôle la manière dont les enfants directs sont stylisés : content (par défaut) les laisse non stylisés ; container les empile en sections bordées et rembourrées. Le rembourrage évolue avec la largeur de la fenêtre et est identique pour les deux variantes. Taille est entièrement réactive — le rembourrage et le rayon de bordure augmentent automatiquement à 320px (20rem) et 640px (40rem) via les requêtes médias standard min-width ; aucune classe de taille n'est nécessaire. Associez avec @pantoken/components pour les titres, boutons et autres composants en ligne.

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

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

Exemples ​

Carte de contenu

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

Carte conteneur

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

Structure ​

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;

Modificateurs ​

ModificateurDescription
.-variant-containerCarte conteneur ; les enfants directs deviennent des sections bordées et rembourrées.
.-variant-contentCarte de contenu standard ; les enfants ne sont pas stylisés. Par défaut quand aucune variante n'est définie.

Conditions ​

TypeRequêteDescription
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>#—

Compatibilité des navigateurs ​

  • @scope est Baseline 2023 Nouvellement Disponible ; la carte régresse vers une feuille de style plate non portée dans les anciens navigateurs sans perte de style visible.

Connexe ​

  • heading — Place directly in the card or inside a container section.
  • button — Place directly in the card or inside a container section.
  • img — Place directly in the card as a media region.
  • badge — Place directly in the card as a status indicator.

Voir aussi ​