Forma 36 - Text

Text is a basic typography component. It will be displayed as a span element by default with a default font family, font color, font size and letter spacing.

Text component is a basic for other typography components. We recommend using it when you need to display <span> element and still keep the proper typography styling.

Import

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

Examples


function TextBasicExample() {
  return <Text>I love Forma 36 design system.</Text>;
}function TextBasicExample() {
  return <Text>I love Forma 36 design system.</Text>;
}

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.


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>
  );
}

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.


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>
  );
}

`as` property

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


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>
  );
}

Truncated


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>
  );
}

Props (API reference)

Open in Storybook

Name
as
HTML Tag or React Component (e.g. div, span, etc)
Name
children
ReactNode
Name
className
Description
CSS class to be appended to the root element
string
Name
fontColor
"blue100"
"blue200"
"blue300"
"blue400"
"blue500"
"blue600"
"blue700"
"blue800"
"blue900"
"gray100"
"gray200"
"gray300"
"gray400"
"gray500"
"gray600"
"gray700"
"gray800"
"gray900"
"green100"
"green200"
"green300"
"green400"
"green500"
"green600"
"green700"
"green800"
"green900"
"orange100"
"orange200"
"orange300"
"orange400"
"orange500"
"orange600"
"orange700"
"orange800"
"orange900"
"purple100"
"purple200"
"purple300"
"purple400"
"purple500"
"purple600"
"purple700"
"purple800"
"purple900"
"red100"
"red200"
"red300"
"red400"
"red500"
"red600"
"red700"
"red800"
"red900"
"colorPrimary"
"colorPositive"
"colorNegative"
"colorWarning"
"colorWhite"
"yellow100"
"yellow200"
"yellow300"
"yellow400"
"yellow500"
"yellow600"
"yellow700"
"yellow800"
"yellow900"
Name
fontSize
"fontSize4Xl"
"fontSize3Xl"
"fontSize2Xl"
"fontSizeXl"
"fontSizeL"
"fontSizeM"
"fontSizeS"
Name
fontStack
"fontStackPrimary"
"fontStackMonospace"
Name
fontWeight
"fontWeightNormal"
"fontWeightMedium"
"fontWeightDemiBold"
Name
isTruncated
false
true
Name
lineHeight
"lineHeightDefault"
"lineHeightCondensed"
"lineHeight4Xl"
"lineHeight3Xl"
"lineHeight2Xl"
"lineHeightXl"
"lineHeightL"
"lineHeightM"
"lineHeightS"
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
testId
Description
A [data-test-id] attribute used for testing purposes
string

Import

Examples

Changing the font size

Changing the font color

as property

Truncated

Props (API reference)

as

children

className

fontColor

fontSize

fontStack

fontWeight

isTruncated

lineHeight

margin

marginBottom

marginLeft

marginRight

marginTop

testId

Help improve this page

`as` property