Heading
The Heading
component allows you to show headings on the page & has a bigger line height than regular text.
Props
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