CSS: card ​

.instui-card — Egy felületi konténer, amely tetszőleges tartalmat fogad.

A Variant szabályozza, hogyan vannak stilizálva a közvetlen gyermekelemek: content (alapértelmezett) nem stilizálja őket; a container egymásra helyezi őket bekeretezett, párnázott szekciókként. A padding a nézetablak szélességével skálázódik, és mindkét variánsnál azonos. A Size teljesen reszponzív — a padding és a border-radius automatikusan növekszik 320px (20rem) és 640px (40rem) esetén a standard min-width media query-k révén; nincs szükség méretosztályra. Párosítsd @pantoken/components-val címsorokhoz, gombokhoz és egyéb inline komponensekhez.

Hozzáférhetőség ​

Használja a <article> elemet kártyaelemként, ha a kártya önálló tartalmi egység; használjon <section>-t, ha egy nagyobb szemantikai területen belül van csoportosítva. A -variant-container-ben részesítse előnyben, hogy a közvetlen gyermekeik <section> elemek legyenek, így minden keretezett régió szemantikus jelentést hordoz.

Használat ​

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

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

Példák ​

Tartalomkártya

html
<article class="instui-card">
  <h2 class="instui-heading -h3">Kártya címe</h2>
  <p>Tartalom itt.</p>
  <button class="instui-button">Művelet</button>
</article>

Konténer kártya

html
<article class="instui-card -variant-container">
  <section>Első szakasz</section>
  <section>Második szakasz</section>
</article>

Struktúra ​

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;

Módosítók ​

MódosítóLeírás
.-variant-containerKonténer kártya; a közvetlen gyermekelemek keretezett, belső párnázottsággal rendelkező szakaszokká válnak.
.-variant-contentStandard tartalmi kártya; a gyermekelemek nincsenek stilizálva. Alapértelmezett, ha nincs variáns beállítva.

Feltételek ​

TípusLekérdezésLeírás
media(min-width: 20rem)—
media(min-width: 40rem)—

Fogyasztott tokenek ​

TokenTípusÉrték
--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>#—

Böngészőtámogatás ​

@scope a Baseline 2023-ban újonnan elérhető; a kártya régebbi böngészőkben egy unscoped, egyszerű (flat) stíluslapra degradálódik, látható stílusbeli veszteség nélkül.

Kapcsolódó ​

  • heading — Helyezze közvetlenül a kártyába vagy egy konténer szakaszába.
  • button — Helyezze közvetlenül a kártyába vagy egy konténer szakaszába.
  • img — Helyezze közvetlenül a kártyába, média régióként.
  • badge — Helyezze közvetlenül a kártyába státuszjelzőként.

Lásd még ​