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

DisplayText

DisplayText is used to display text in special scenarios - example usages of DisplayText include empty states, promotional/featured items, etc.

DisplayText should not be used as a replacement for headings/page titles (use the Heading component instead).

Import

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

Code examples

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
size
"default"
"large"
"huge"
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