Import
import { SectionHeading } from '@contentful/f36-components';// orimport { 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 StorybookName | 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 |
Density support
This component supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density (when wrapped with the DensityProvider
).