A semantic heading element.
<Heading>The quick brown fox jumps over the lazy dog</Heading>
This component is based on the h1 element and supports common margin props.
Use the as prop to change the heading level. This prop is purely semantic and does not change the visual appearance.
<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>
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 decrease.
Heading sizes match Text sizes. However, the line heights and letter spacing are set tighter.
<Flex direction="column" gap="3">
<Heading size="9">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="8">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="7">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="6">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="5">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="4">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="3">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="2">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="1">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
Use the align prop to set text alignment.
<Heading align="left">Left-aligned</Text>
<Heading align="center">Center-aligned</Text>
<Heading align="right">Right-aligned</Text>
Use the trim prop to trim the leading space at the start, end, or both sides of the text box.
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.
<Flex direction="column" gap="3">
<Heading
trim="normal"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
Without trim
</Heading>
<Heading
trim="both"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
With trim
</Heading>
</Flex>
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.
<Flex direction="column" gap="3">
<Box
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
p="4"
>
<Heading mb="1" size="3">
Without trim
</Heading>
<Text>
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
<Box
p="4"
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
>
<Heading mb="1" size="3" trim="start">
With trim
</Heading>
<Text trim="end">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
</Flex>
Use the color prop to assign a specific color, ignoring the global theme.
<Flex direction="column" gap="1">
<Heading color="indigo" size="5">
The quick brown fox jumps over the lazy dog
</Heading>
<Heading color="cyan" size="5">
The quick brown fox jumps over the lazy dog
</Heading>
<Heading color="orange" size="5">
The quick brown fox jumps over the lazy dog
</Heading>
<Heading color="crimson" size="5">
The quick brown fox jumps over the lazy dog
</Heading>
</Flex>
Use the highContrast prop to add contrast within colored headings.
<Heading size="5" color="gray">
The quick <Text highContrast>brown fox</Text> jumps over the lazy dog.
</Heading>