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

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.

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.

as property

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

Truncated

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