SectionHeading

SectionHeading is intended to be used as a title for each section. SectionHeading are very important for accessibility, as they help to make copy more easily scannable and guides a user through your content. When using screen readers, it finds sections in your copy based on your heading hierarchy.

Import

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

Examples

Basic

Margins

By default SectionHeading component has a margin bottom of spacingL (1.5rem). 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

By default SectionHeading has an h2 tag. But you can change it by providing as prop with values from h1 to h6.

Truncated text

Sometimes you might have to truncate the text in the SectionHeading 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