CSS: card ​

.instui-card — Un contenidor superficial que accepta contingut arbitrari.

Variant controla com s'estilen els fills directes: content (predeterminat) els deixa sense estil; container els apila com a seccions amb vora i farciment. El farciment escala amb l'amplada de la finestra i és el mateix en ambdues variants. Mida és totalment responsive — el farciment i el radi de vora augmenten automàticament a 320px (20rem) i 640px (40rem) mitjançant consultes de mitjans estàndard min-width; no cal cap classe de mida. Combina amb @pantoken/components per a encapçalaments, botons i altres components en línia.

Accessibilitat ​

Utilitzeu <article> com a element de targeta quan la targeta sigui una unitat de contingut autocontenida; utilitzeu <section> quan s'agrupi dins d'un marcador més gran. A -variant-container, preferiu elements <section> com a fills directes perquè cada regió amb vora tingui un significat semàntic.

Ús ​

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

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

Exemples ​

Targeta de contingut

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

Targeta contenidor

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

Estructura ​

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;

Modificadors ​

ModificadorDescripció
.-variant-containerTargeta contenidor; els fills directes esdevenen seccions amb vora i farciment.
.-variant-contentTargeta de contingut estàndard; els fills no tenen estil. Predeterminada quan no s'estableix cap variant.

Condicions ​

TipusConsultaDescripció
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens consumits ​

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

Suport del navegador ​

  • @scope és Baseline 2023 Newly Available; la targeta es degrada a una fulla d'estils plana sense àmbit en navegadors antics sense pèrdua d'estil visible.

Relacionat ​

  • heading — Col·loqueu directament a la targeta o dins d'una secció del contenidor.
  • button — Col·loqueu directament a la targeta o dins d'una secció del contenidor.
  • img — Col·loqueu directament a la targeta com a regió de mitjans.
  • badge — Col·loqueu directament a la targeta com a indicador d'estat.

Vegeu també ​