CSS: heading

.instui-heading — Rubriehtatypografiija mainna -level-h1 dutnje -level-h6.

-variant-* presetat dálggahit -level-*-n font-size ja font-weight, niin sii galgá geavahit ovttas dutnje familjain elementas.

Source: heading.css

Guhkkinjohka

Dát luhtteclassat sávvána doarvái visuvnna boahtit, nugo geavvá <h1>–<h6> maiddái (vai geavvá role="heading" aria-level-n barggu) muitalit rubriehhaávnnjit.

Buktáhašvuohta

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

Exempla

<div class="instui-heading -level-h1">Heading h1</div>

Modifisuvnnat

Modifiserer	Deskripción
.-border-bottom	Laddat gávpogirji guhkes.
.-border-top	Laddat girjegihtas guhkes.
.-color-ai	AI-accent fargga.
.-color-primary	(default) Primárr fargga.
.-color-primary-inverse	On-dark (primárr inversse) fargga.
.-color-secondary	Sekundár (muttahtta) fargga.
.-level-h1	Boahttá h1 typaskála.
.-level-h2	Boahttá h2 typaskála.
.-level-h3	Boahttá h3 typaskála.
.-level-h4	Boahttá h4 typaskála.
.-level-h5	Boahttá h5 typaskála.
.-level-h6	Boahttá h6 typaskála.
.-variant-label	Label-typ preset.
.-variant-title-card-mini	Mini korttitittel preset.
.-variant-title-card-regular	Regulár korttitittel preset.
.-variant-title-card-section	Korttasektión titellahka preset.
.-variant-title-page	Sida-titellahka preset.
.-variant-title-section	Sektsión-titellahka preset.

Tokenat gaskkalit

Token	Type	Vaššun
--instui-component-heading-ai-text-bottom-gradient-color	<color>	LightDarklight-dark(#027887, #3CC0D4)
--instui-component-heading-ai-text-top-gradient-color	<color>	LightDarklight-dark(#944FB3, #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.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>	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.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

Dálkkodat

• text — Gávnnatypografiija ožžot rubriehhat mii ii leat rubriehha.