CSS: card
.instui-card — Egy felületkonténer, amely tetszőleges tartalmat fogad el.
A Variant határozza meg a közvetlen gyermekelemek stílusát: a(z) content (alapértelmezett) formázatlanul hagyja őket; a(z) container szegéllyel és belső margóval ellátott szakaszokként rendezi el őket egymás alatt. A belső margó a nézetablak szélességével arányosan skálázódik, és mindkét változatban azonos. A Size teljesen reszponzív — a belső margó és a border-radius automatikusan növekszik 320px (20rem) és 640px (40rem) szélességnél a szabványos min-width médialekérdezéseken keresztül; nincs szükség külön méretosztályra. Kombinálja a(z) @pantoken/components elemmel címsorokhoz, gombokhoz és egyéb beágyazott komponensekhez.
Akadálymentesség
Használja a <article> elemet kártyaelemként, ha a kártya egy önálló tartalmi egység; használja a <section> elemet, ha egy nagyobb tájékozódási ponton belül van csoportosítva. A -variant-container esetében előnyben kell részesíteni a <section> elemeket közvetlen gyermekként, hogy minden keretezett terület szemantikai jelentéssel bírjon.
Használat
@import "@pantoken/plugin-custom-components/custom-components.css";
@import "@pantoken/plugin-custom-components/custom-components.css";Példák
Tartalomkártya
<article class="instui-card">
<h2 class="instui-heading -h3">Card title</h2>
<p>Content here.</p>
<button class="instui-button">Action</button>
</article>Konténerkártya
<article class="instui-card -variant-container">
<section>First section</section>
<section>Second section</section>
</article>Felépítés
.instui-card
‹content›Módosítók
| Módosító | Leírás |
|---|---|
.-variant-container | Konténerkártya; a közvetlen gyermekelemek kerettel és belső margóval ellátott szekciókká válnak. |
.-variant-content | Szabványos tartalomkártya; a gyermekelemek nem rendelkeznek stílussal. Alapértelmezett, ha nincs változat beállítva. |
Feltételek
| Típus | Lekérdezés | Leírás |
|---|---|---|
| media | (min-width: 20rem) | — |
| media | (min-width: 40rem) | — |
Felhasznált tokenek
| Token | Tí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-card | none | <shadow># | — |
Böngészőtámogatás
- A
@scopea Baseline 2023 Newly Available része; a kártya egy nem hatókörrel rendelkező (unscoped) egyszerű stíluslapra fokozódik le a régebbi böngészőkben a látható stílus elvesztése nélkül.
Kapcsolódó
- heading — Helyezze közvetlenül a kártyába vagy egy konténerszekcióba.
- button — Helyezze közvetlenül a kártyába vagy egy konténerszekcióba.
- img — Helyezze közvetlenül a kártyába médiaterületként.
- badge — Helyezze közvetlenül a kártyába állapotjelzőként.