CSS: card

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

base jest domyślną wyniesioną powierzchnią. Użyj nested dla karty z obramowaniem wewnątrz karty bazowej. Padding i promienie narożników skalują się wraz z szerokością samego Card; starszy znacznik bez .content opakowania używa punktów przerwania widoku.

Source: card.css

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

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

Przykłady

Karta kontenerowa

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Pierwsza sekcja</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Druga sekcja</div>
    </section>
  </div>
</article>

Modyfikatory

Modyfikator	Opis
.-variant-base	Standardowa karta z treścią; dzieci są niestylizowane. Domyślnie, gdy nie ustawiono wariantu.
.-variant-container	Przestarzałe — use .-variant-nested.
.-variant-content	Przestarzałe — use .-variant-base.
.-variant-nested	Powierzchnia tylko z obramowaniem dla karty wewnątrz karty bazowej.

Warunki

Typ	Zapytanie	Opis
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Zużyte tokeny

Token	Typ	Wartość
--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-card	none | <shadow>#	—