CSS: card ​

.instui-card · stable — Ein Oberflächenbehälter, der beliebigen Inhalt akzeptiert.

base ist die standardmäßige erhöhte Oberfläche. Verwenden Sie nested für eine mit Rahmen versehene Karte innerhalb einer Basiskarte. Innenabstände und Eckradien skalieren mit der eigenen Breite der Card; Legacy-Markup ohne einen .content Wrapper verwendet Viewport-Breakpoints.

Source: card.css

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

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

Beispiele ​

Container-Karte

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Erster Abschnitt</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Zweiter Abschnitt</div>
    </section>
  </div>
</article>

Modifikatoren ​

ModifikatorBeschreibung
.-variant-baseStandard-Inhaltskarte; Kinder sind ungestylt. Standard, wenn keine Variante gesetzt ist.
.-variant-containerVeraltet — use .-variant-nested.
.-variant-contentVeraltet — use .-variant-base.
.-variant-nestedRahmenbasierte Oberfläche für eine Karte innerhalb einer Basiskarte.

Bedingungen ​

TypAbfrageBeschreibung
container(width >=20rem)—
container(width >=40rem)—
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>#—