DisplayText

Import

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

Examples

Basic

Hide code
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>
  );
}
Open in Playground

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

Hide code
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>
  );
}
Open in Playground

as property

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

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

Composition

Hide code
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>
  );
}
Open in Playground