Heading

Heading is intended to be used to define the title of the page. They are displayed as h1 by default. Accessibility requires having just one h1 tag on the page. Keep that in mind during the implementation.

Import

import { Heading } from '@contentful/f36-components';
// or
import { Heading } from '@contentful/f36-typography';

Examples

Margins

Forma 36 typography components provide a way to set their own margins. By default Heading component has a margin bottom of 1rem (16px). You can override the default margin bottom by specifying it explicitly on the component level by marginBottom="none" or any other value from our spacing options

as property

For some cases, you might have to use Heading in a different context than the page title. For that we provide you with as property, to allow you to set the tag of the component to another tag than h1

Truncated text

Sometimes you might have to truncate the text in the Heading component, so we provide the prop especially for that. Under the hood, what it does is add overflow: hidden and set text-overflow to ellipsis. Have a look at the example below:

Composition

Props (API reference)

Open in Storybook

Name

Type

Default

as
HTML Tag or React Component (e.g. div, span, etc)

children
ReactNode

className
string

CSS class to be appended to the root element

isTruncated
false
true

isWordBreak
false
true

margin
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin to one of the corresponding spacing tokens

marginBottom
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-left to one of the corresponding spacing tokens

marginRight
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-right to one of the corresponding spacing tokens

marginTop
"none"
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"

sets margin-top to one of the corresponding spacing tokens

testId
string

A [data-test-id] attribute used for testing purposes