SmartHR Design System

Heading

見出し要素の代替として直後のコンテンツの見出しを示すコンポーネントです。「セクション」や「ブロック」に見出しをつけるときに使います。

使用上の注意

コンテンツのアウトラインに沿って、順に使用することを想定しています。
例えば、ブロックタイトルの前にサブ・ブロックタイトルを使わないようにしましょう。

種類

見出しレベルに合わせた5種類を定義しています。 SmartHR UIでは、タイプ（typeprops）で種類を指定できます。

画面タイトル

画面のタイトルにはPageHeadingコンポーネントを使用してください。screenTitleタイプとh1要素が自動的に設定されます。

セクションタイトル

サイズはXXL、XL、Lから選択できます。デフォルトはLです。

タイプフォントサイズウェイト色サンプル
sectionTitleXXLnormalTEXT_BLACK

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

sectionTitleXLnormalTEXT_BLACK

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

sectionTitleL（デフォルト）normalTEXT_BLACK

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

ブロックタイトル

タイプフォントサイズウェイト色サンプル
blockTitleMboldTEXT_BLACK

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サブ・ブロックタイトル

タイプフォントサイズウェイト色サンプル
subBlockTitleMboldTEXT_GREY

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サブ・サブ・ブロックタイトル

タイプフォントサイズウェイト色サンプル
subSubBlockTitleSboldTEXT_GREY

well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

レイアウト

アウトラインに合わせた使用例は以下のとおりです。
余白については、余白の取り方を参照してください。

アウトラインに合わせた使用例

アクセシビリティ

開発時の考慮点

HTMLの見出しレベルがh1～h6の順になっているかを確認する

PageHeadingはh1要素が自動的に設定され、以降の見出しはSectioningContentを併用することで自動的に見出しレベルが設定されます。 実装後、HTMLを見て以下を確認してください。

  • Headingのタイプ（typeprops）とHTMLの見出しレベル（h2～h6）が合致しているか
  • ページにある見出しがh1～h6の順でマークアップされているか

関連ページ

ライティング

関連するライティングガイドラインを参照してください。

モバイル

モバイルでは、サイズがXXLのタイポグラフィは小さく調整されます。詳しくはタイポグラフィのページを参照してください。

使い方チェックリスト

Heading
参照元：使用上の注意 「使用上の注意」の本文へ移動
  • Must
    Heading はコンテンツのアウトラインに沿って順に使用する
    • ブロックタイトルの前にサブ・ブロックタイトルを使わない
参照元：種類 > 画面タイトル 「種類 > 画面タイトル」の本文へ移動
  • Must
    画面のタイトルには PageHeading コンポーネントを使う
参照元：アクセシビリティ > 開発時の考慮点 > HTMLの見出しレベルが`h1`～`h6`の順になっているかを確認する 「アクセシビリティ > 開発時の考慮点 > HTMLの見出しレベルが`h1`～`h6`の順になっているかを確認する」の本文へ移動
  • Must
    HTMLの見出しレベルが`h1`～`h6`の順になっているかを確認する
    • `Heading`のタイプ（`type`props）とHTMLの見出しレベル（`h2`～`h6`）が合致しているか
    • ページにある見出しが`h1`～`h6`の順でマークアップされているか

Props

unrecommendedTag
"h1""h2""h3""h4""h5""h6"

可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください

visuallyHidden
falsetrue

視覚的に非表示にするフラグ

icon
any

テキスト左に設置するアイコン

type
"sectionTitle""blockTitle""subBlockTitle""subSubBlockTitle"

テキストのスタイル テキストのスタイル

screenTitleを使用する場合、PageHeadingコンポーネントを使用してください

size
"L""XL""XXL"

テキストのサイズ

sectionTitleの場合、XXLかXLかLを指定してください