CSS: heading

.instui-heading — Fejléc tipográfia -level-h1-től -level-h6-ig.

A -variant-* előbeállítások felülírják egy -level-* font-size és font-weight értékeit, ezért egy elemhez csak egy-egy családot kombinálj.

Source: heading.css

Hozzáférhetőség

Ezek az osztályok csak a megjelenés szintjét állítják be, ezért jeleníts meg valódi <h1>–<h6> elemeket (vagy használd a role="heading"-et aria-level-lel) a címsorszint közléséhez.

Használat

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

Példák

<div class="instui-heading -level-h1">Címsor h1</div>

Módosítók

Módosító	Leírás
.-border-bottom	Adj hozzá egy alsó elválasztót.
.-border-top	Adj hozzá egy felső szabályt.
.-color-ai	AI-accent színe.
.-color-primary	(alapértelmezett) Elsődleges szín.
.-color-primary-inverse	Sötét háttéren (primáris inverz) szín.
.-color-secondary	Másodlagos (tompa) szín.
.-level-h1	Megjelenítés a h1 típusméretnél.
.-level-h2	Renderelés a h2 betűméret-skálán.
.-level-h3	Megjelenítés h3 típusméreten.
.-level-h4	Renderelés a h4 típusméret-skálán.
.-level-h5	Megjelenítés a h5 típus skálán.
.-level-h6	Renderelés a h6 típusméreten.
.-variant-label	Címketípus előbeállítás.
.-variant-title-card-mini	Mini card-title előre beállítás.
.-variant-title-card-regular	Normál card-title előbeállítás.
.-variant-title-card-section	Kártya section-title előbeállítása.
.-variant-title-page	Oldalcím előbeállítás
.-variant-title-section	Szakaszcím előbeállítás

Fogyasztott tokenek

Token	Típus	Érték
--instui-component-heading-ai-text-bottom-gradient-color	<color>	LightDarklight-dark(#02717E, #3CC0D4)
--instui-component-heading-ai-text-top-gradient-color	<color>	LightDarklight-dark(#8A49A7, #CAA1D9)
--instui-component-heading-base-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-heading-border-color	<color>	LightDarklight-dark(#8D959F, #6A7883)
--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.25rem
--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>	LightDarklight-dark(#ffffff, #1C222B)
--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>	LightDarklight-dark(#576773, #AAB0B5)
--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.25rem
--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 — A törzsszöveg tipográfiája a nem címsorként szolgáló szövegekhez.