Text

Import

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

Examples

Hide code
function TextBasicExample() {
  return <Text>I love Forma 36 design system.</Text>;
}
function TextBasicExample() {
  return <Text>I love Forma 36 design system.</Text>;
}
Open in Playground

You can pass all basic font related parameters as properties of the component.

Changing the font size

To increase the font size of the text, you can pass the fontSize property. Notice, that by default Text component has no margins.

Hide code
function TextFontSizeExample() {
  return (
    <Stack flexDirection="column">
      <Text fontSize="fontSize4Xl" lineHeight="lineHeight4Xl">
        (4xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSize3Xl" lineHeight="lineHeight3Xl">
        (3xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSize2Xl" lineHeight="lineHeight2Xl">
        (2xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeXl" lineHeight="lineHeightXl">
        (xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeL" lineHeight="lineHeightL">
        (l) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeM" lineHeight="lineHeightM">
        (m) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeS" lineHeight="lineHeightS">
        (s) I love Forma 36 design system.
      </Text>
    </Stack>
  );
}
function TextFontSizeExample() {
  return (
    <Stack flexDirection="column">
      <Text fontSize="fontSize4Xl" lineHeight="lineHeight4Xl">
        (4xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSize3Xl" lineHeight="lineHeight3Xl">
        (3xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSize2Xl" lineHeight="lineHeight2Xl">
        (2xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeXl" lineHeight="lineHeightXl">
        (xl) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeL" lineHeight="lineHeightL">
        (l) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeM" lineHeight="lineHeightM">
        (m) I love Forma 36 design system.
      </Text>
      <Text fontSize="fontSizeS" lineHeight="lineHeightS">
        (s) I love Forma 36 design system.
      </Text>
    </Stack>
  );
}
Open in Playground

Changing the font color

To increase the font color of the text, you can pass the fontColor properties. You can use only colors allowed by Forma 36 color palette.

Hide code
function TextColorsExample() {
  return (
    <Stack flexDirection="column">
      <Text fontColor="blue500">I love Forma 36 design system.</Text>
      <Text fontColor="red500">I love Forma 36 design system.</Text>
      <Text fontColor="gray900">I love Forma 36 design system.</Text>
    </Stack>
  );
}
function TextColorsExample() {
  return (
    <Stack flexDirection="column">
      <Text fontColor="blue500">I love Forma 36 design system.</Text>
      <Text fontColor="red500">I love Forma 36 design system.</Text>
      <Text fontColor="gray900">I love Forma 36 design system.</Text>
    </Stack>
  );
}
Open in Playground

as property

To override the element that gets rendered, pass the as property.

Hide code
function TextPolymorphicExample() {
  return (
    <Stack flexDirection="column">
      <Text marginBottom="spacingM" as="i">
        Italic
      </Text>
      <Text marginBottom="spacingM" as="u">
        Underline
      </Text>
      <Text marginBottom="spacingM" as="del">
        Deleted
      </Text>
      <Text marginBottom="spacingM" as="s">
        Strike Through
      </Text>
    </Stack>
  );
}
function TextPolymorphicExample() {
  return (
    <Stack flexDirection="column">
      <Text marginBottom="spacingM" as="i">
        Italic
      </Text>
      <Text marginBottom="spacingM" as="u">
        Underline
      </Text>
      <Text marginBottom="spacingM" as="del">
        Deleted
      </Text>
      <Text marginBottom="spacingM" as="s">
        Strike Through
      </Text>
    </Stack>
  );
}
Open in Playground

Truncated

Hide code
function TextTruncateExample() {
  return (
    <Text isTruncated as="div">
      Lorem ipsum is placeholder text commonly used in the graphic, print, and
      publishing industries for previewing layouts and visual mockups.
    </Text>
  );
}
function TextTruncateExample() {
  return (
    <Text isTruncated as="div">
      Lorem ipsum is placeholder text commonly used in the graphic, print, and
      publishing industries for previewing layouts and visual mockups.
    </Text>
  );
}
Open in Playground