CSS: card ​

.instui-card — Pinta-kontaineri, joka hyväksyy mielivaltaista sisältöä.

Variantti ohjaa, miten suorat lapset tyylitellään: content (oletus) jättää ne tyylittämättömiksi; container pinottaa ne reunustettuina, täytettyinä osioina. Täyte skaalautuu näkymäleveyden mukaan ja on sama molemmissa varianteissa. Koko on täysin responsiivinen — täyte ja reunuksen säde kasvavat automaattisesti kohdissa 320px (20rem) ja 640px (40rem) vakiomaisilla min-width-mediaqueryilla; erillistä kokoluokkaa ei tarvita. Yhdistä @pantoken/components-komponenttiin otsikoita, painikkeita ja muita rivin sisäisiä komponentteja varten.

Saavutettavuus ​

Käytä <article> korttielementtinä, kun kortti on itsenäinen sisältöyksikkö; käytä <section> kun se on ryhmitelty osaksi suurempaa maamerkkiä. -variant-container:ssa suositaan <section>-elementtejä suorina lapsina, jotta jokainen reunustettu alue kantaa semanttista merkitystä.

Käyttö ​

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

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

Esimerkit ​

Sisältökortti

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

Kontainerikortti

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

Rakenne ​

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;

Muokkaajat ​

MuokkaajaKuvaus
.-variant-containerKontainerikortti; suorat lapset muuttuvat reunustetuiksi, täytetyiksi osioiksi.
.-variant-contentVakio sisältökortti; lapset ovat tyylittämättömiä. Oletus, kun varianttia ei ole asetettu.

Ehdot ​

TyyppiKyselyKuvaus
media(min-width: 20rem)—
media(min-width: 40rem)—

Käytetyt tokenit ​

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

Selaintuki ​

  • @scope on Baseline 2023 Uusi saatavilla; kortti heikkenee vanhemmissa selaimissa skoopittomaksi, tasaiseksi tyylitaulukoksi ilman näkyvän tyylin menetystä.

Liittyvät ​

  • heading — Aseta suoraan korttiin tai kontaineriosioon.
  • button — Aseta suoraan korttiin tai kontaineriosioon.
  • img — Aseta suoraan korttiin mediana-alueeksi.
  • badge — Aseta suoraan korttiin tilaa osoittavaksi merkiksi.

Katso myös ​