CSS: card

.instui-card · stabile — Un contenitore di superficie che accetta contenuti arbitrari.

base è la superficie elevata predefinita. Usa nested per una card con bordo all'interno di una card base. Padding e raggi degli angoli si scalano con la larghezza della Card; il markup legacy senza un .content wrapper usa i breakpoint della viewport.

Source: card.css

Accessibilità

Usa <article> come elemento card quando la card è un'unità di contenuto autonoma; usa <section> quando è raggruppata all'interno di un landmark più ampio. In -variant-container, preferisci elementi <section> come figli diretti in modo che ogni regione bordata abbia un significato semantico.

Uso

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

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

Esempi

Scheda contenitore

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Prima sezione</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Seconda sezione</div>
    </section>
  </div>
</article>

Modificatori

Modificatore	Descrizione
.-variant-base	Scheda contenuto standard; i figli non sono stilizzati. Predefinita quando non è impostata nessuna variant.
.-variant-container	Deprecato — use .-variant-nested.
.-variant-content	Deprecato — use .-variant-base.
.-variant-nested	Superficie solo con bordo per una card all'interno di una card base.

Condizioni

Tipo	Query	Descrizione
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Token consumati

Token	Tipo	Valore
--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>#	—