Heading

A typography primitive for ensuring consistent heading styles and hierarchy. This component provides all relevant typographic styles such as font-family, line-height and font-size.

Heading

React

Heading composes Box so you can use all the style props and add responsive styles as well.

import { Heading } from '@hoverinc/design-system-react-web';

<Heading>I'm a Heading</Heading>

Size

To increase the visual size of the heading, use the size props. This property ensures that the heading size automatically adjusts for smaller screens.

Correct Sizing

The size of Heading should always be controlled via the size prop, not by setting fontSize or lineHeight

Tip

be sure to see the semantic size section below

<Box flexDirection="column">
  <Heading size={900}>Heading 900</Heading>
  <Heading size={800}>Heading 800</Heading>
  <Heading size={700}>Heading 700</Heading>
  <Heading size={600}>Heading 600</Heading>
  <Heading size={500}>Heading 500</Heading>
  <Heading size={400}>Heading 400</Heading>
  <Heading size={300}>Heading 300</Heading>
  <Heading size={200}>Heading 200</Heading>
</Box>

Size Aliases

The Heading component now supports size aliases that match the text styles that design uses.

<Box flexDirection="column">
  <Heading size="xxl">Heading XXL</Heading>
  <Heading size="xl">Heading XL</Heading>
  <Heading size="large">Heading Large</Heading>
  <Heading size="medium">Heading Medium</Heading>
  <Heading size="small">Heading Small</Heading>
  <Heading size="xs">Heading XS</Heading>
</Box>

Semantic Size

An appropriate semantic heading tag is selected by default based on the size prop, however it's often best to supply the as prop explicitly to ensure the correct semantic heading tag is used for the information hierarchy of a given layout.

Size	Default `as`
`200`	`<h6>`
`300`	`<h5>`
`400`	`<h4>`
`500`	`<h3>`
`600`	`<h2>`
`650`	`<h2>`
`700`	`<h1>`
`800`	`<h1>`
`900`	`<h1>`

Truncation

If you'd like to truncate the heading after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

<Heading noOfLines={1}>
  Basic text writing, including headings, body text, lists, and more.
</Heading>

Margin

The Heading presets come with a default margin-bottom for separating the heading from a sub-title or content. This is often note desired in flex or grid based layouts. In that case, simply set noMargin to disable the default margin.

For editorial or otherwise block content, the default margin should be used to separate the Heading:

<system.div as="article">
  <Heading size={500}>Some Title</Heading>
  <LoremIpsum generate={{ p: 3, sentences: 5 }} />
</system.div>

For other interfaces, the margin can be disabled to align things properly:

Tip

This also uses Capsize to align the Heading with the icon, see below for more information.

<HStack
  bg="neutral.200"
  borderRadius="300"
  py="200"
  px="300"
  width="fit-content"
>
  <Heading size={500} noMargin withCapsize>
    Some Title
  </Heading>
  <Icon icon={iconSettings} />
</HStack>

Capsize

Sometimes, in order to align text properly, it's necessary to do so based on the height of the capital letters instead of the raw line-height value. For these cases, heading presets are available with a Capsize adjustment so that the vertical size of the text is aligned with its cap height.

Pass withCapsize to enable Capsize dimensions for Heading. Toggle the checkboxes below to see the difference in layout.

Note

The Capsize adjustment only applies when the display CSS property is set to inline, block, or inline-block.

Heading

Text Style

Capsize can also be applied via textStyle:

<VStack fontFamily="body">
  <system.span
    as="label"
    bg="danger.200"
    borderRadius="200"
    textStyle="heading500WithCapsizeAndMargin"
  >
    Label with Capsize <em>and</em> margin
  </system.span>
  <system.span
    as="label"
    bg="danger.200"
    borderRadius="200"
    textStyle="heading500WithCapsize"
  >
    Label with Capsize
  </system.span>
</VStack>

Balanced Wrapping

If a heading is wrapped into multiple lines, it will be balanced to ensure the lines have approximately the same width. To disable this behavior, the prop balancedText needs to be explicitly set to false.

<VStack maxWidth="850" gap="80px">
  {/* default */}
  <Heading>
    This is a long heading that needs to be broken into multiple lines on the
    screen.
  </Heading>
  {/* balancing off */}
  <Heading balancedText={false}>
    This is a long heading that needs to be broken into multiple lines on the
    screen.
  </Heading>
</VStack>

Bootstrap

Bootstrap applies the appropriate styles to the <h1> through <h6> elements.

<div class="vstack gap-300">
  <h1>Heading 700</h1>
  <h2>Heading 600</h2>
  <h3>Heading 500</h3>
  <h4>Heading 400</h4>
  <h5>Heading 300</h5>
  <h6>Heading 200</h6>
</div>

Heading Classes

The .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<div class="vstack gap-300">
  <span class="h1">Heading 700</span>
  <span class="h2">Heading 600</span>
  <span class="h3">Heading 500</span>
  <span class="h4">Heading 400</span>
  <span class="h5">Heading 300</span>
  <span class="h6">Heading 200</span>
</div>

React Native

Font Scaling

This component supports dynamic font scaling for accessibility, capped at 1.35x. When extending Heading via styled(), use HeadingBase and pass scaled props from the parent. See Typography — Font Scaling for details.

Grid

Icon