CSS: heading ​

.instui-heading — -level-h1 から -level-h6 までの見出しのタイポグラフィ。

-variant-* プリセットは -level-* の font-size と font-weight を上書きするため、要素ごとに各ファミリーは一つだけ組み合わせてください。

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-h1h1 のタイプスケールでレンダリングします。
.-level-h2h2 のタイプスケールでレンダリングします。
.-level-h3h3 のタイプスケールでレンダリングします。
.-level-h4h4 のタイプスケールでレンダリングします。
.-level-h5h5 のタイプスケールでレンダリングします。
.-level-h6h6 のタイプスケールでレンダリングします。
.-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 — 見出し以外の本文用タイポグラフィ。