Displays a basic heading element.
This component is based on the native heading element and supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the as prop to specify the heading level. This prop is purely semantic and does not change the visual appearance of the text.
Use the align prop to set text alignment. You can change the alignment across breakpoints using the object syntax.
Use the size prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing – as text size increases, the relative line height and letter spacing decreate.
You can change the size across breakpoints using the object syntax.
Heading sizes match Text sizes. However, the line heights and letter spacing are set tighter.
Use the trim prop to trim the leading space at the start, end, or both sides of the text box. You can change the leading trim across breakpoints using the object syntax.
The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, the card padding looks larger on top and bottom than on the sides.