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

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

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

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

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

Props (API reference)

Open in Storybook

Name

Type

Default

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

children
ReactNode

className
string

CSS class to be appended to the root element

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"

fontSize
"fontSize4Xl"
"fontSize3Xl"
"fontSize2Xl"
"fontSizeXl"
"fontSizeXlHigh"
"fontSizeL"
"fontSizeLHigh"
"fontSizeM"
"fontSizeMHigh"
"fontSizeS"
"fontSizeSHigh"

fontStack
"fontStackPrimary"
"fontStackMonospace"

fontWeight
"fontWeightNormal"
"fontWeightMedium"
"fontWeightDemiBold"

isTruncated
false
true

isWordBreak
false
true

letterSpacing
"letterSpacingDefault"
"letterSpacingWide"

lineHeight
"lineHeightDefault"
"lineHeightCondensed"
"lineHeight4Xl"
"lineHeight3Xl"
"lineHeight2Xl"
"lineHeightXl"
"lineHeightXlHigh"
"lineHeightL"
"lineHeightLHigh"
"lineHeightM"
"lineHeightMHigh"
"lineHeightS"
"lineHeightSHigh"

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

testId
string

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