CSS: card ​

.instui-card · stable — Un contenidor de superfície que accepta contingut arbitrari.

base és la superfície elevada per defecte. Utilitza nested per a una targeta amb vora dins d'una targeta base. El padding i els radis de cantonada s'ajusten a l'amplada de la pròpia Card; el marcatge antic sense un .content wrapper utilitza punts d'interrupció de la finestra de visualització.

Source: card.css

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

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

Exemples ​

Targeta contenidor

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Primera secció</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Segona secció</div>
    </section>
  </div>
</article>

Modificadors ​

ModificadorDescripció
.-variant-baseTargeta de contingut estàndard; els fills no tenen estil. Predeterminada quan no s'estableix cap variant.
.-variant-containerDeprecat — use .-variant-nested.
.-variant-contentDeprecat — use .-variant-base.
.-variant-nestedSuperfície només amb contorn per a una targeta dins d'una targeta base.

Condicions ​

TipusConsultaDescripció
container(width >=20rem)—
container(width >=40rem)—
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>#—