Heading

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

SmartHR UIではHeadingです。

種類

見出しレベルに合わせた5種類を定義しています。

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

SmartHR UIでは、タイプ(type props)で種類を指定できます。

画面タイトル

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

タイプフォントサイズウェイトサンプル
screenTitleXLnormalTEXT_BLACK社会の非合理を、ハックする

セクションタイトル

タイプフォントサイズウェイトサンプル
sectionTitleLnormalTEXT_BLACK社会の非合理を、ハックする

ブロックタイトル

タイプフォントサイズウェイトサンプル
blockTitleMboldTEXT_BLACK社会の非合理を、ハックする

サブ・ブロックタイトル

タイプフォントサイズウェイトサンプル
subBlockTitleMboldTEXT_GREY社会の非合理を、ハックする

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

タイプフォントサイズウェイトサンプル
subSubBlockTitleSboldTEXT_GREY社会の非合理を、ハックする

レイアウト

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

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

ライティング

見出しの書き方

画面上のオブジェクトや操作を、簡潔に体言止めで書きます。複数行になる長いタイトルは見直しましょう。

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

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

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

Props

NameRequiredTypeDefault ValueDescription
type-"screenTitle", "sectionTitle", "blockTitle", "subBlockTitle", "subSubBlockTitle"
tag-"h1", "h2", "h3", "h4", "h5", "h6", "span"
className-string
© 2021, SmartHR, Inc.