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

Examples

Basic

Open in Playground
function DisplayTextExample() {
  return (
    <Flex flexDirection="column">
      <DisplayText size="large">Pages</DisplayText>
      <DisplayText>Select space</DisplayText>
    </Flex>
  );
}
function DisplayTextExample() {
  return (
    <Flex flexDirection="column">
      <DisplayText size="large">Pages</DisplayText>
      <DisplayText>Select space</DisplayText>
    </Flex>
  );
}
Hide source

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

Open in Playground
function DisplayTextMarginsExample() {
  return (
    <Flex flexDirection="column">
      <DisplayText size="large" marginBottom="spacing4Xl">
        Pages
      </DisplayText>
      <DisplayText marginLeft="spacingM">Select space</DisplayText>
    </Flex>
  );
}
function DisplayTextMarginsExample() {
  return (
    <Flex flexDirection="column">
      <DisplayText size="large" marginBottom="spacing4Xl">
        Pages
      </DisplayText>
      <DisplayText marginLeft="spacingM">Select space</DisplayText>
    </Flex>
  );
}
Hide source

as property

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

Open in Playground
function DisplayTextTagExample() {
  return (
    <DisplayText as="h1" marginBottom="none">
      Pages
    </DisplayText>
  );
}
function DisplayTextTagExample() {
  return (
    <DisplayText as="h1" marginBottom="none">
      Pages
    </DisplayText>
  );
}
Hide source

Composition

Open in Playground
function DisplayTextCompositionExample() {
  return (
    <Flex flexDirection="column" alignItems="center">
      <DisplayText>
        Nice one!{' '}
        <span role="img" aria-label="Shopping bag">
          🛍
        </span>
      </DisplayText>
      <Paragraph>You successfully purchased the Medium space.</Paragraph>
    </Flex>
  );
}
function DisplayTextCompositionExample() {
  return (
    <Flex flexDirection="column" alignItems="center">
      <DisplayText>
        Nice one!{' '}
        <span role="img" aria-label="Shopping bag">
          🛍
        </span>
      </DisplayText>
      <Paragraph>You successfully purchased the Medium space.</Paragraph>
    </Flex>
  );
}
Hide source

Props (API reference)

• Name

  as

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

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isTruncated

  false

  true
• Name

  margin

  Description

  sets margin to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  size

  "default"

  "large"
• Name

  testId

  Description

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

  string