CSS: card

.instui-card — površinski vsebnik, ki sprejme poljubno vsebino.

Variant določa, kako so oblikovani neposredni otroci: content (privzeto) jih pusti neoblikovane; container jih zloži kot obrobljene, obložene odseke. Obloga se prilagaja širini pogleda in je enaka v obeh variantah. Velikost je popolnoma odzivna — obloga in zaokrožitev roba se samodejno povečata pri 320px (20rem) in 640px (40rem) preko standardnih min-width medijskih poizvedb; razreda za velikost ni treba. Uporabite v kombinaciji z @pantoken/components za naslove, gumbe in druge inline komponente.

Dostopnost

Uporabite <article> kot element kartice, kadar je kartica samostojna enota vsebine; uporabite <section>, ko je združena znotraj večjega zemljepisnega območja. V -variant-container raje postavite elemente <section> kot neposredne otroke, da ima vsak obrobljen odsek semantični pomen.

Uporaba

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

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

Primeri

Vsebinski kartica

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

Kontejnerska kartica

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

Struktura

.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;

Spremenljivke (modifikatorji)

Modifikator	Opis
.-variant-container	Kontejnerska kartica; neposredni otroci postanejo obrobljeni, obloženi odseki.
.-variant-content	Standardna vsebinska kartica; otroci so neoblikovani. Privzeto, kadar ni nastavljena nobena varianta.

Pogoji

Tip	Poizvedba	Opis
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Porabljeni žetoni

Token	Tip	Vrednost
--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>#	—

Podpora brskalnika

• @scope je Baseline 2023 Newly Available; kartica se v starejših brskalnikih degradira na neskopiran ploski slogovni list brez izgube vidne oblike.

Sorodno

• heading — Postavite neposredno v kartico ali znotraj kontejnerskega odseka.
• button — Postavite neposredno v kartico ali znotraj kontejnerskega odseka.
• img — Postavite neposredno v kartico kot medijsko območje.
• badge — Postavite neposredno v kartico kot indikator statusa.

Glej tudi

• https://drafts.csswg.org/css-cascade-6/#scoping