Heading

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

SmartHR UIではHeadingです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import { Heading } from './Heading'
export default {
title: 'Text(テキスト)/Heading',
component: Heading,
}
export const All: Story = () => (
<List>
<li>
<Heading type="screenTitle" tag="h1">
ScreenTitle
</Heading>
</li>
<li>
<Heading type="sectionTitle" tag="h2">
SectionTitle
</Heading>
</li>
<li>
<Heading type="blockTitle" tag="h3">
BlockTitle
</Heading>
</li>
<li>
<Heading type="subBlockTitle" tag="h4">
SubBlockTitle
</Heading>
</li>
<li>
<Heading type="subSubBlockTitle" tag="h5">
SubSubBlockTitle
</Heading>
</li>
</List>
)
All.storyName = 'all'
const List = styled.ul`
padding: 0 2.4rem;
list-style: none;
& > li {
&:not(:first-child) {
margin-top: 2.4rem;
}
& > *:not(:first-child) {
margin-left: 1.6rem;
}
}
`
処理中

使いどころ

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

種類

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

画面タイトル

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

タイプフォントサイズウェイトサンプル
screenTitleXLnormalTEXT_BLACKwell-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

セクションタイトル

タイプフォントサイズウェイトサンプル
sectionTitleLnormalTEXT_BLACKwell-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

ブロックタイトル

タイプフォントサイズウェイトサンプル
blockTitleMboldTEXT_BLACKwell-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

サブ・ブロックタイトル

タイプフォントサイズウェイトサンプル
subBlockTitleMboldTEXT_GREYwell-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

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

タイプフォントサイズウェイトサンプル
subSubBlockTitleSboldTEXT_GREYwell-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。

レイアウト

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

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

ライティング

見出しの書き方

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

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

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

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

見出しが動詞で終わる場合でも、句点は省略します。

Props

NameRequiredTypeDescription
childrentruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal表示するテキスト
type-"screenTitle", "sectionTitle", "blockTitle", "subBlockTitle", "subSubBlockTitle"テキストのスタイル
tag-"span", "h1", "h2", "h3", "h4", "h5", "h6", "legend"コンポーネントの HTML タグ
className-stringコンポーネントに適用するクラス名