CSS: heading ​

.instui-heading — Yfirskriftartegundir frá -level-h1 til -level-h6.

Stillingarinnar -variant-* yfirstíga leturstærð og þyngd -level-*, svo sameina aðeins eina úr hverju fjölskyldu á hvert stak.

Source: heading.css

Aðgengi ​

Þessar klasa stilla aðeins sjónrænt stig, svo skilaðu raunverulegu <h1>–<h6> (eða notaðu role="heading" með aria-level) til að miðla yfirskriftarstiginu.

Notkun ​

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

Dæmi ​

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

Breytingar ​

BreytiLýsing
.-border-bottomBæta við neðri reglu.
.-border-topBæta við efri reglu.
.-color-aiAI-áherslu litur.
.-color-primary(sjálfgefið) Aðallitur.
.-color-primary-inverseÁ dökku (aðal andhverfa) litur.
.-color-secondaryAukalit (daufur) litur.
.-level-h1Rendera á h1 leturstiganum.
.-level-h2Rendera á h2 leturstiganum.
.-level-h3Rendera á h3 leturstiganum.
.-level-h4Rendera á h4 leturstiganum.
.-level-h5Rendera á h5 leturstiganum.
.-level-h6Rendera á h6 leturstiganum.
.-variant-labelForsetur fyrir merki (label) leturgerð.
.-variant-title-card-miniForsetur fyrir litla kort-titil (mini card-title).
.-variant-title-card-regularForsetur fyrir venjulegan kort-titil (regular card-title).
.-variant-title-card-sectionForsetur fyrir kafla-kort-titil (card section-title).
.-variant-title-pageForsetur fyrir síðu-titil (page-title).
.-variant-title-sectionForsetur fyrir kafla-titil (section-title).

Notuð tákn ​

TokenTegundGildi
--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

Tengdar ​

  • text — Líkamsletur (body) fyrir texta sem er ekki yfirskrift.