Skip to main content

Heading

Examples

Basic Heading

The correct HTML element will be inferred from the provided level. If a text element needs to be a heading for accessibility purposes, but cannot use a heading tag (h1, h2, etc.), it can be assigned role="heading" and aria-level="[Level of Heading]" (e.g. aria-level="2").

My Heading

Code
<Heading level={1}>
  My Heading
</Heading>

Heading as Alternative Element

<Heading> also accepts an as prop if it needs to be rendered as another element.

My Heading

Code
<Heading
  as="p"
  level={1}
>
  My Heading
</Heading>

Colored Heading

My colored heading

Code
<Heading
  color="brand-secondary"
  level={2}
>
  My colored heading
</Heading>

Heading Levels

My very long XL Heading Level 1 will help scientists make breakthroughs and medical professionals save lives

My very long Heading Level 1 will help scientists make breakthroughs and medical professionals save lives

My very long Heading Level 2 will help scientists make breakthroughs and medical professionals save lives

My very long Heading Level 3 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 3 will help scientists make breakthroughs and medical professionals save lives

My very long Heading Level 4 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 4 will help scientists make breakthroughs and medical professionals save lives

My very long Heading Level 5 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 5 will help scientists make breakthroughs and medical professionals save lives
Code
<>
  <Divider />
  <Box>
    <Heading
      level={1}
      xl
    >
      My very long XL Heading Level 1 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
  <Box>
    <Heading
      level={1}
    >
      My very long Heading Level 1 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
  <Box>
    <Heading
      level={2}
    >
      My very long Heading Level 2 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
  <Box>
    <Heading
      level={3}
    >
      My very long Heading Level 3 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 3 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
  <Box>
    <Heading
      level={4}
    >
      My very long Heading Level 4 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 4 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
  <Box>
    <Heading
      level={5}
    >
      My very long Heading Level 5 will help scientists make breakthroughs and medical professionals save livesMy very long Heading Level 5 will help scientists make breakthroughs and medical professionals save lives
    </Heading>
    <Divider />
  </Box>
</>

Input Ref

Passing an inputRef.

I'm a heading with a yellow background

Code
<Heading
  inputRef={{
    current: '[Circular]'
  }}
  level={1}
>
  I'm a heading with a yellow background
</Heading>

XL Heading

The xl prop can be used sparingly to render the largest font size available.

My XL Heading

Code
<Heading
  level={1}
  xl
>
  My XL Heading
</Heading>

Props

as

ElementType

Renders as another element if specified, defaults as heading with heading level provided by `level` prop

level

HeadingLevel

Renders the element as heading with specified level

color

"brand-secondary" | "global-primary"

Text color

Default: "global-primary"

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

xl

boolean

Renders the largest font size available

Default: false