CSS: heading
.instui-heading — Fejléc tipográfia a -level-h1-tól a -level-h6-ig.
Forrás: heading.ts
Akadálymentesség
Ezek az osztályok csak a vizuális szintet állítják be, ezért renderelj egy valódi <h1>–<h6> (vagy használd a role="heading"-t aria-level-vel) a fejléc szintjének közvetítéséhez.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/heading.css";Példák
html
<div class="instui-heading -level-h1">Heading h1</div>Heading h1
Módosítók
| Módosító | Leírás |
|---|---|
.-border-bottom | Adj hozzá egy alsó vonalat. |
.-border-top | Adj hozzá egy felső vonalat. |
.-color-ai | AI-hangsúly szín. |
.-color-primary-inverse | Sötét (elsődleges inverz) szín. |
.-color-secondary | Másodlagos (tompított) szín. |
.-level-h1 | Renderelj az h1 típusskálán. |
.-level-h2 | Renderelj az h2 típusskálán. |
.-level-h3 | Renderelj az h3 típusskálán. |
.-level-h4 | Renderelj az h4 típusskálán. |
.-level-h5 | Renderelj az h5 típusskálán. |
.-level-h6 | Renderelj az h6 típusskálán. |
.-variant-label | Címke típus előbeállítás. |
.-variant-title-card-mini | Mini kártya-cím előbeállítás. |
.-variant-title-card-regular | Szabályos kártya-cím előbeállítás. |
.-variant-title-card-section | Kártya szakasz-cím előbeállítás. |
.-variant-title-page | Oldal-cím előbeállítás. |
.-variant-title-section | Szakasz-cím előbeállítás. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-heading-ai-text-bottom-gradient-color | <color> | light-dark(#027887, #3CC0D4)LightDark |
--instui-component-heading-ai-text-top-gradient-color | <color> | light-dark(#944FB3, #CAA1D9)LightDark |
--instui-component-heading-base-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-heading-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-component-heading-border-padding | <length> | 0.125rem |
--instui-component-heading-border-width | <length> | 0.0625rem |
--instui-component-heading-h1-font-family | [ <font-family-name> | <generic-font-family> ]# | Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-heading-h1-font-size | <length> | 2.5rem |
--instui-component-heading-h1-font-weight | <integer> | 700 |
--instui-component-heading-h2-font-size | <length> | 1.75rem |
--instui-component-heading-h2-font-weight | <integer> | 600 |
--instui-component-heading-h3-font-size | <length> | 1.25rem |
--instui-component-heading-h3-font-weight | <integer> | 700 |
--instui-component-heading-h4-font-size | <length> | 1rem |
--instui-component-heading-h4-font-weight | <integer> | 700 |
--instui-component-heading-h5-font-size | <length> | 0.875rem |
--instui-component-heading-h5-font-weight | <integer> | 600 |
--instui-component-heading-h6-font-size | <length> | 0.75rem |
--instui-component-heading-h6-font-weight | <integer> | 600 |
--instui-component-heading-inverse-color | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-heading-label-font-size | <length> | 1rem |
--instui-component-heading-label-font-weight | <integer> | 700 |
--instui-component-heading-line-height | <percentage> | 125% |
--instui-component-heading-muted-color | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-component-heading-title-card-mini-font-size | <length> | 1rem |
--instui-component-heading-title-card-mini-font-weight | <integer> | 700 |
--instui-component-heading-title-card-regular-font-size | <length> | 1.25rem |
--instui-component-heading-title-card-regular-font-weight | <integer> | 700 |
--instui-component-heading-title-card-section-font-size | <length> | 1.75rem |
--instui-component-heading-title-card-section-font-weight | <integer> | 700 |
--instui-component-heading-title-page-desktop-font-size | <length> | 2.5rem |
--instui-component-heading-title-page-desktop-font-weight | <integer> | 700 |
--instui-component-heading-title-section-font-size | <length> | 1.75rem |
--instui-component-heading-title-section-font-weight | <integer> | 700 |
Kapcsolódó
- text — Törzs tipográfia nem fejléc szöveghez.