CSS: heading ​

.instui-heading — 从 -level-h1 到 -level-h6 的标题排版。

-variant-* 预设会覆盖 -level-* 的字体大小和字重，因此每个元素只应组合每个家族的一种。

Source: heading.css

无障碍 ​

这些类仅设置视觉层级，因此应渲染真实的 <h1>–<h6>（或在配合 aria-level 时使用 role="heading"）来传达标题等级。

用法 ​

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

示例 ​

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

修饰符 ​

修饰符描述
.-border-bottom添加底部分隔线。
.-border-top添加顶部分隔线。
.-color-aiAI 强调色。
.-color-primary（默认）主色。
.-color-primary-inverse深色背景上（主色反色）。
.-color-secondary次要（弱化）颜色。
.-level-h1按 h1 字体尺度渲染。
.-level-h2按 h2 字体尺度渲染。
.-level-h3按 h3 字体尺度渲染。
.-level-h4按 h4 字体尺度渲染。
.-level-h5按 h5 字体尺度渲染。
.-level-h6按 h6 字体尺度渲染。
.-variant-label标签文字预设。
.-variant-title-card-mini迷你卡片标题预设。
.-variant-title-card-regular常规卡片标题预设。
.-variant-title-card-section卡片章节标题预设。
.-variant-title-page页面标题预设。
.-variant-title-section章节标题预设。

消耗代币 ​

Token类型值
--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

相关 ​

  • text — 用于非标题文本的正文字体。