Maturity
This component is for Code only. In Figma, rely instead on Text Styles.
Overview
The component implementation of the Heading tokens, which gives visual cues of hierarchy and semantic meaning as under the hood, uses <h1> – <h4> based on the level given.
Related content
Properties
|
Name |
Values |
Default |
|---|---|---|
|
align Set the horizontal text alignment, based on text-align. Works with dir to correctly set the directionality. |
end, start, center |
start |
|
color Set the color |
'default.main.primary', 'default.main.secondary', 'default.extra.awake', 'default.extra.critical', 'default.extra.dormant', 'default.extra.warning', 'default.extra.success', 'default.extra.featured', 'default.extra.onExtra', 'inverted.primary', 'inverted.secondary |
'default.main.primary' |
|
dir Indicates the directionality of the element's text, based on dir |
auto, ltr, rtl |
– |
|
hidden Whether an element is completely hidden on the page |
boolean |
– |
|
id The id of the element |
string |
– |
|
inline Render text inline instead of as a block |
boolean |
– |
|
level The semantic level of the heading. |
1, 2, 3, 4 |
2 |
|
truncate Truncate the text based on it’s width |
boolean |
– |
|
whiteSpace Set how the white space inside the text is handled, based on white-space |
pre, normal, nowrap, pre-wrap, break-spaces, pre-line |
normal |
How to use
Defining a new section and giving context to what that section is about, Headings should give a user an understanding of what the content following will be about.
Levels
Use the different levels to give hierarchy to the page but do not skip level as this creates a visual imbalance and some confusion to users. A level should be picked for it’s semantic context on the page not for it’s font size.
For more about which level is right the one to use, read the Headings section of the Product Typography documentation.
<Heading level={1}>Page Title</Heading>
<Heading level={2}>Subtitle></Heading>