components
Heading (code)
Headings are meant to structurally denote important regions and provide a clear hierarchy in pages.
An important title
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| as | FunctionStringNodeObject | - | - | Change the rendered HTML tag e.g. span, p, h1 |
| children | Node | - | true | Content for component *required |
| className | String | - | - | Extend classNames. |
| color | String | - | - | Changes the Heading's color, choose one of the tokens. |
| decoration | 'inherit''none''underline''line-through' | 'none' | - | Sets the css text-decoration property. |
| fontFamily | 'inherit''primary''secondary''system' | 'system' | - | Sets the css font-family property. |
| fontStyle | 'inherit''normal''italic''oblique' | - | - | Sets the css font-style property. |
| fontWeight | 'inherit''regular''medium''bold' | - | - | Sets the css font-weight property. |
| level | 123456 | 1 | - | Maps token scale to font-size, line-height & font-weight |
| textAlign | 'inherit''left''right''center''justify' | 'inherit' | - | Sets the css text-align property. |
| textTransform | 'inherit''none''capitalize''uppercase''lowercase' | - | - | Sets the css text-transform property. |
System Props
color
alignSelf, flex, flexBasis, flexGrow, flexShrink, order
m, mb, ml, mr, mt, mx, my
fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform
float
display
System Props
Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.
To read more about the system, click here to check out its dedicated page.
Color
default: colorBlackBase
To change the text color.
A colorized title
A colorized title
Decoration
default: none
Controls the text-decoration css attribute.
A title with underline
A title with line-through
FontFamily
default: system
Font-families can be used to discern between multiple uses of a Heading.
A primary title
A secondary title
A system title
FontWeight
default: undefined
Controls the font-weight css attribute. Only 3 values are available. If a value is missing, it will fallback on the more bold weight.
inherit
regular
medium
bold
Level
default: 1
To change the font-size and the html-tag.
Note: Heading 1, 2, 3, 4, 5 and 6 have responsive behaviour.
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
TextAlign
default: inherit
Controls the css text-align attribute.