This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Heading

To add the Heading component to your app:

1
2
import { Heading } from '@forge/react';

Description

A piece of text at the top of a page or section.

Props

Name	Type	Required	Description
`children`	`string`	Yes	The text of the heading.
`size`	`'small' \| 'medium' \| 'large'`		The size of the heading. Defaults to `medium`.

Example

Size property

small

Use small headings for subsections or subsection headings within a larger topic. They are typically used to provide additional organization and hierarchy within the content.

Example image of rendered small heading

1
2
import { Heading } from '@forge/react';
<Heading size="small">Small heading</Heading>
<Text>
    Default text
</Text>

medium

Use medium headings for main sections or major sub-topics within the document. They help break down the content into manageable sections and provide a clear visual distinction between different topics.

Example image of rendered medium heading

1
2
import { Heading } from '@forge/react';
<Heading size="medium">Medium heading</Heading>
<Text>
Default text
</Text>

large

Use a large heading to render a heading with a larger font size than other headings on the page. This could be used to emphasize the importance of the heading or to make it stand out from the other content on the page.

Example image of rendered large heading

1
2
import { Heading } from '@forge/react';
<Heading size="large">Large heading</Heading>
<Text>
Default text
</Text>