DisplayText

View on Github

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

Examples

Basic

Margins

Forma 36 typography components provide a way to set their own margins. By default DisplayText component has a margin bottom (spacingL or spacingXl depending on size property).

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

We provide you with as property, to allow you to set the tag of the DisplayText component to another tag than h2.

Composition

Props (API reference)

Name

Type

Default

as
HTML Tag or React Component (e.g. div, span, etc)

className
string

CSS class to be appended to the root element

isTruncated
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

size
"default"
"large"

testId
string

A [data-test-id] attribute used for testing purposes