#Heading

Geist for titles and section headings, where hierarchy comes from the size step — reach for Text when the words are copy rather than a title. Visual size and document level are independent: pick size for how it looks and as for the outline, so a visually small heading can still be the h2 the structure needs.

Source · Storybook

#Usage

import { Heading } from '@wallarm-org/design-system/Heading';

#Examples

#Sizes

The full ramp with its metrics. The bottom steps deliberately duplicate the text ramp — sm is 14 on 20 exactly as in Text — because what separates them is semantic, not visual.

#Weights

All four weights at every size, so weight emphasises within a level rather than creating one.

#As child

asChild moves the styling onto your own element, keeping whatever tag the surrounding markup needs.

#Polymorphic elements

as across the heading levels, which is the outline both a screen reader and a table of contents read. Choose it from the document structure, not from the size you wanted.

#As span

A heading rendered inline, for a title inside a row of other content where a block element would break the line.

#As div

A heading with no document level at all, for text that looks like a title but should not appear in the outline.

#Props