The Heading component allows you to show headings on the page & has a bigger line height than regular text.

Props

Name
Type
Default
1 | 2 | 3 | 4 | 5 | 6 | "none"
-

Allows you to override the default heading level for the given size

"start" | "end" | "center" | "justify" | "forceLeft" | "forceRight"
"start"

"start" and "end" should be used for regular alignment since they flip with locale direction. "forceLeft" and "forceRight" should only be used in special cases where locale direction should be ignored, such as tabular or numeric text.

children
React.Node
-
"blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white"
"darkGray"
id
string
-
number
-

Visually truncate the text to the specified number of lines. This also adds the title attribute if children is a string, which displays the full text on hover in most browsers.

"normal" | "breakWord"
"breakWord"
"sm" | "md" | "lg"
"lg"

sm: 20px, md: 28px, lg: 36px

Example: Sizes

Heading small

こんにちは

Heading medium

こんにちは

Heading large

こんにちは

Example: Colors

White

Dark gray (default)

Gray

Blue

Red

Example: Overflow & truncation

breakWord (default):

This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

normal:

This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

lineClamp:

This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

Example: Alignment

Start-aligned heading (default)

End-aligned heading

Center-aligned heading

Justify-aligned heading

Forced-left-aligned heading

Forced-right-aligned heading

Example: Levels

For accessibility purposes, we allow you to override the heading level. We should have one level 1 per page & levels should be appropriately nested. E.g. level 1 followed by level 2 & level 2 followed by level 2 or level 3. We also allow headings without an accessibility level.

Medium heading level 2

Small heading level 3

Small heading without a level