Usage

Levels

Use the Heading component for dynamic levels, 1-6 available.

<>
  <Heading level="1">Heading level one</Heading>
  <Heading level="2">Heading level two</Heading>
  <Heading level="3">Heading level three</Heading>
  <Heading level="4">Heading level four</Heading>
  <Heading level="5">Heading level five</Heading>
  <Heading level="6">Heading level six</Heading>
  <Heading level="7">Heading level 7</Heading>
</>

Semantic headings

There may be occasions where the desired appearance does not meet the necessary semantic heading level. Use the as property to change the HTML element that will be rendered.

Edit in Playroom

<Heading level="5" as="h2">
  An h2 with the appearance of h4
</Heading>

Overflow strategy

Use the overflowStrategy prop to manage how Heading behaves with regard to overflow.

Edit in Playroom

<Stack gap="medium">
  <Box maxWidth={320}>
    <Heading level="5">
      <Strong>default:</Strong> The quick brown fox jumps over the lazy dog.
    </Heading>
  </Box>
  <Box maxWidth={320}>
    <Heading level="5" overflowStrategy="truncate">
      <Strong>truncate:</Strong> The quick brown fox jumps over the lazy dog.
    </Heading>
  </Box>
  <Box maxWidth={320}>
    <Heading level="5" overflowStrategy="nowrap">
      <Strong>nowrap:</Strong> The quick brown fox jumps over the lazy dog.
    </Heading>
  </Box>
  <Box maxWidth={320}>
    <Heading level="5" overflowStrategy="breakword">
      <Strong>breakword:</Strong> The quick_brown_fox_jumps_over_the_lazy_dog.
    </Heading>
  </Box>
</Stack>

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

Edit in Playroom

<Heading level="6" leading="tight">
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
  the lazy dog. The quick brown fox jumps over the lazy dog.
</Heading>

Color

Default text color for Heading is base. When needed, you can override with a different text color from the theme's palette resolver. Read more on how this works

Edit in Playroom

<>
  <Heading level="5" color="base">
    Base
  </Heading>
  <Heading level="5" color="muted">
    Muted
  </Heading>
  <Heading level="5" color="dim">
    Dim
  </Heading>
</>