Heading
HeadingおよびPageHeadingコンポーネントは、直後に続くコンテンツの見出しに使うコンポーネントです。
使用上の注意
コンテンツのアウトラインに沿って、順に使用することを想定しています。
例えば、ブロックタイトルの前にサブ・ブロックタイトルを使わないようにしましょう。
種類
見出しレベルに合わせた5種類を定義しています。
SmartHR UIでは、タイプ（typeprops）で種類を指定できます。
画面タイトル
画面のタイトルにはPageHeadingコンポーネントを使用してください。screenTitleタイプとh1要素が自動的に設定されます。
セクションタイトル
サイズはXXL、XL、Lから選択できます。デフォルトはLです。
| タイプ | フォントサイズ | ウェイト | 色 | サンプル |
|---|---|---|---|---|
| sectionTitle | XXL | normal | TEXT_BLACK | well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。 |
| sectionTitle | XL | normal | TEXT_BLACK | well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。 |
| sectionTitle | L（デフォルト） | normal | TEXT_BLACK | well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。 |
ブロックタイトル
| タイプ | フォントサイズ | ウェイト | 色 | サンプル |
|---|---|---|---|---|
| blockTitle | M | bold | TEXT_BLACK | well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。 |
サブ・ブロックタイトル
サブ・サブ・ブロックタイトル
レイアウト
アウトラインに合わせた使用例は以下のとおりです。
余白については、余白の取り方を参照してください。
アクセシビリティ
関連するチェックリスト
簡易チェックリスト
弱視・ロービジョンのユーザビリティチェックリスト
ライティング
関連するライティングガイドラインを参照してください。
モバイル
モバイルでは、サイズがXXLのタイポグラフィは小さく調整されます。詳しくはタイポグラフィのページを参照してください。
Props
unrecommendedTag
"h1" "h2" "h3" "h4" "h5" "h6"
可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください
visuallyHidden
false true
視覚的に非表示にするフラグ
icon
any
テキスト左に設置するアイコン
type
"sectionTitle" "blockTitle" "subBlockTitle" "subSubBlockTitle"
テキストのスタイル テキストのスタイル
screenTitleを使用する場合、PageHeadingコンポーネントを使用してください
size
"L" "XL" "XXL"
テキストのサイズ
sectionTitleの場合、XXLかXLかLを指定してください