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

Heading

Heading is intended to be used to define a title of the page. They are displayed as h1. Accessibility requires to have 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';

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.
childrenReactNode
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