CSS: card ​

.instui-card — Ein Container für die Oberfläche, der beliebige Inhalte aufnimmt.

Variant steuert, wie direkte Kinder gestylt werden: content (Standard) lässt sie ungestylt; container stapelt sie als abgegrenzte, gepolsterte Abschnitte. Das Padding skaliert mit der Ansichtsfensterbreite und ist in beiden Varianten gleich. Size ist vollständig responsiv — Padding und Border-Radius erhöhen sich automatisch bei 320px (20rem) und 640px (40rem) durch Standard-min-width Media-Queries; eine Größenklasse ist nicht nötig. Kombinieren mit @pantoken/components für Überschriften, Buttons und andere Inline-Komponenten.

Barrierefreiheit ​

Verwende <article> als Card-Element, wenn die Karte eine in sich geschlossene Inhaltseinheit ist; verwende <section>, wenn sie innerhalb eines größeren Landmark-Bereichs gruppiert ist. In -variant-container bevorzugen <section>-Elemente als direkte Kinder, damit jeder abgegrenzte Bereich eine semantische Bedeutung erhält.

Verwendung ​

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

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

Beispiele ​

Inhaltskarte

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

Container-Karte

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

Struktur ​

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;

Modifikatoren ​

ModifikatorBeschreibung
.-variant-containerContainer-Karte; direkte Kinder werden zu abgegrenzten, gepolsterten Abschnitten.
.-variant-contentStandard-Inhaltskarte; Kinder sind ungestylt. Standard, wenn keine Variante gesetzt ist.

Bedingungen ​

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

Verbrauchte Tokens ​

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

Browser-Unterstützung ​

  • @scope ist Baseline 2023 neu verfügbar; die Karte fällt in älteren Browsern zu einem unscoped Flat-Stylesheet zurück, ohne sichtbaren Stilverlust.

Verwandt ​

  • heading — Direkt in der Karte oder innerhalb eines Container-Abschnitts platzieren.
  • button — Direkt in der Karte oder innerhalb eines Container-Abschnitts platzieren.
  • img — Direkt in der Karte als Medienbereich platzieren.
  • badge — Direkt in der Karte als Statusanzeige platzieren.

Siehe auch ​