CSS: card ​

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

Variant controlla come vengono stilizzati i figli diretti: content (predefinito) li lascia non stilizzati; container li impila come sezioni bordate e con padding. Il padding scala con la larghezza della finestra e è lo stesso in entrambe le variant. Size è completamente responsive — padding e border-radius aumentano automaticamente a 320px (20rem) e 640px (40rem) tramite le consuete query media min-width; non è necessaria una classe di dimensione. Abbinalo a @pantoken/components per intestazioni, pulsanti e altri componenti inline.

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

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

Esempi ​

Scheda contenuto

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

Scheda contenitore

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

Struttura ​

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;

Modificatori ​

ModificatoreDescrizione
.-variant-containerScheda contenitore; i figli diretti diventano sezioni bordate e con padding.
.-variant-contentScheda contenuto standard; i figli non sono stilizzati. Predefinita quando non è impostata nessuna variant.

Condizioni ​

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

Token consumati ​

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

Supporto browser ​

  • @scope è Baseline 2023 Newly Available; la card degrada a un foglio di stile piatto non scopo nei browser più vecchi senza perdita della stilizzazione visibile.

Correlati ​

  • heading — Posizionare direttamente nella card o all'interno di una sezione contenitore.
  • button — Posizionare direttamente nella card o all'interno di una sezione contenitore.
  • img — Posizionare direttamente nella card come regione media.
  • badge — Posizionare direttamente nella card come indicatore di stato.

Vedi anche ​