This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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';

Code examples

You can override the default margin bottom by specifying it explicitly.

Props

NameRequiredDefaultTypeDescription
isTruncated
false
true
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
asHTML Tag or React Component, e.g. div, span, etc.
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes