Import
import { SectionHeading } from '@contentful/f36-components';// orimport { SectionHeading } from '@contentful/f36-typography';
Examples
Basic
I love Forma 36 design system
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
I love Forma 36 design system.
I love Forma 36 design system.
I love Forma 36 design system.
as
property
By default SectionHeading
has an h2
tag. But you can change it by providing as
prop with values from h1
to h6
.
I love Forma 36 design system
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:
I love Forma 36 design system, I love Forma 36 design system, I love Forma 36 design system
Composition
About Apps
Build apps for your Contentful organization to extend the core functionality of the web app and optimize the workflow of editors.
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
).