import { Heading } from "@hel/ui/heading"
import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

When to use it#

Use a heading for the title of a page, a section or a card. It gives the text the right element for the page outline, so screen reader users can jump between sections, and the right size and font from the design system, so you don't pick them by hand.

For everything that is not a title, such as descriptions, captions and labels, use Text.

Import#

Copyimport { Heading } from "@hel/ui/heading"

Levels#

level decides the element, from h1 to h6, and the size that goes with it. The default is level 2.

import { Heading } from "@hel/ui/heading"
import { Stack } from "@hel/ui/stack"

Headings are semibold in the heading font, with the primary text color, and they have no margin of their own. Put the spacing around them with a Stack.

The scale at large screen widths is:

The sizes come from responsive tokens, so they can get smaller on narrow screens.

Examples#

Outline first, size second#

Choose the level for the page structure, not for how big it should look. A page has one h1, its sections are h2, and their parts are h3, with no skipped levels. When the design wants a different size than that level gives, set size on its own. The element stays the same and only the look changes.

import { Button } from "@hel/ui/button"
import { Card } from "@hel/ui/card"
import { Heading } from "@hel/ui/heading"

Props#

Heading also takes every prop of a heading element, such as id and className.