Live example
Implementation
Custom styling a heading
If you need to change the size of the heading, use a different class to style it rather than changing the heading level itself.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
children |
ReactNode |
|
|
inverted |
boolean |
false |
|
semanticComponent |
'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' |
|
Native Properties
|
Name |
Values |
Default |
|---|---|---|
|
inverted |
boolean |
false |
|
level (required) |
'xl' | '2xl' | '3xl' | '4xl' |
|
|
variant |
'brand' | 'surface' |
'surface' |
|
accessibilityRole |
|
'heading' |
|
… |
PropsWithChildren<TextProps> |
|
Composition
- Heading text
|
Tokens |
|
|---|---|
|
Text color |
color.brand.brand |
|
Text font weight - H1, H2 |
font.family.black |
|
Text font weight - H3, H4 |
font.family.bold |
|
Text font size - H1 |
font.size.4xl |
|
Text font size - H2 |
font.size.3xl |
|
Text font size - H3 |
font.size.2xl |
|
Text font size - H4 |
font.size.xl |
|
Text line height - H1 |
font.lineheight.4xl |
|
Text line height - H2 |
font.lineheight.3xl |
|
Text line height - H3 |
font.lineheight.2xl |
|
Text line height - H4 |
font.lineheight.xl |
|
Text letter spacing - H1 |
font.letterspacing.4xl |
|
Text letter spacing - H2 |
font.letterspacing.3xl |
|
Text letter spacing - H3 |
font.letterspacing.2xl |
|
Text letter spacing - H4 |
font.letterspacing.xl |
|
Text paragraph spacing - H1 |
font.paragraph.4xl |
|
Text paragraph spacing - H2 |
font.paragraph.3xl |
|
Text paragraph spacing - H3 |
font.paragraph.2xl |
|
Text paragraph spacing - H4 |
font.paragraph.xl |