Heading

Headingコンポーネントは、直後に続くコンテンツの見出しに使用します。

SmartHR UIではHeadingです。

コンテンツのアウトラインに合わせて、順に使用することを想定しています。

見出しの書き方

画面上のオブジェクトや操作を、簡潔に体言止めで書きます。

例えば、オブジェクトの一覧(コレクション)画面のタイトルでは、「[オブジェクト名]一覧」「[オブジェクト名]の一覧」のような冗長な表記をなるべく避け、「オブジェクト名」とのみ書くようにします。

複数行になる長いタイトルは見直しましょう。

アクションを伴う画面(新規作成画面、編集画面)では、アクションに関わる動詞(動名詞)は、基本的に「の」で接続して表記します。

  • 「権限の追加」
  • 「申請の取り消し」

種類

SmartHR UIでは、Headingコンポーネントのtype propsで種類を指定できます。

見出しレベル(H1-H5)の順序に合わせて、前後しないように使用してください。(例:ブロックタイトルの前にサブ・ブロックタイトルを使わない)

名前サンプル
画面タイトル

社会の非合理を、ハックする

セクションタイトル

社会の非合理を、ハックする

ブロックタイトル

社会の非合理を、ハックする

サブ・ブロックタイトル

社会の非合理を、ハックする

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

社会の非合理を、ハックする

画面タイトル

画面のタイトルとして、画面ごとに1度しか使えません。

タイプサイズ(rem)サイズ(px)ウェイトサンプル
screenTitle1.5rem24pxnormal

社会の非合理を、ハックする

セクションタイトル

タイプサイズ(rem)サイズ(px)ウェイトサンプル
sectionTitle1.125rem18pxnormal

社会の非合理を、ハックする

ブロックタイトル

タイプサイズ(rem)サイズ(px)ウェイトサンプル
blockTitle0.875rem14pxbold

社会の非合理を、ハックする

サブ・ブロックタイトル

タイプサイズ(rem)サイズ(px)ウェイトサンプル
subBlockTitle0.875rem14pxbold

社会の非合理を、ハックする

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

タイプサイズ(rem)サイズ(px)ウェイトサンプル
subSubBlockTitle0.6875rem11pxbold

社会の非合理を、ハックする

使用例

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

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

© 2021, SmartHR, Inc.