CSS: card ​

.instui-card — Kontener powierzchniowy, który przyjmuje dowolną zawartość.

Variant kontroluje, jak stylizowane są bezpośrednie dzieci: content (domyślnie) pozostawia je niestylizowane; container układa je jako obramowane, wypełnione sekcje. Wypełnienie skalowane jest wraz z szerokością widoku i jest takie samo dla obu wariantów. Size jest w pełni responsywny — wypełnienie i promień obramowania zwiększają się automatycznie przy 320px (20rem) i 640px (40rem) za pomocą standardowych zapytań medialnych min-width; nie jest potrzebna klasa rozmiaru. Paruj z @pantoken/components dla nagłówków, przycisków i innych komponentów liniowych.

Dostępność ​

Użyj <article> jako elementu karty, gdy karta jest samodzielną jednostką treści; użyj <section>, gdy jest zgrupowana w większym obszarze nawigacyjnym. W -variant-container preferuj elementy <section> jako bezpośrednie dzieci, tak aby każdy obramowany region miał znaczenie semantyczne.

Użycie ​

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

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

Przykłady ​

Karta z treścią

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

Karta kontenerowa

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

Struktura ​

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;

Modyfikatory ​

ModyfikatorOpis
.-variant-containerKarta kontenerowa; bezpośrednie dzieci stają się obramowanymi, wypełnionymi sekcjami.
.-variant-contentStandardowa karta z treścią; dzieci są niestylizowane. Domyślnie, gdy nie ustawiono wariantu.

Warunki ​

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

Zużyte tokeny ​

TokenTypWartość
--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>#—

Wsparcie przeglądarek ​

  • @scope jest Baseline 2023 Newly Available; karta degraduje się do niezakresowego płaskiego arkusza stylów w starszych przeglądarkach bez utraty widocznego stylowania.

Powiązane ​

  • heading — Umieść bezpośrednio w karcie lub wewnątrz sekcji kontenera.
  • button — Umieść bezpośrednio w karcie lub wewnątrz sekcji kontenera.
  • img — Umieść bezpośrednio w karcie jako region multimedialny.
  • badge — Umieść bezpośrednio w karcie jako wskaźnik statusu.

Zobacz także ​