This is version 4 beta of Forma 36Go back to last stable version 3
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';

Code 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 prop.

Changing the font color

To increase the font color of the text, you can pass the fontColor prop.

Override the element

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

Truncate text

Other properties

The same way you can control the other font related properties. Please refer to the table below to see all possible properties and their values.

Props

NameRequiredDefaultTypeDescription
fontColorColorTokens
fontSizeFontSizeTokens
fontStack
"fontStackPrimary"
"fontStackMonospace"
fontWeight
"fontWeightNormal"
"fontWeightMedium"
"fontWeightDemiBold"
isTruncated
false
true
lineHeightLineHeightTokens
marginSpacingsets margin to one of the corresponding spacing tokens
marginBottomSpacingsets margin-bottom to one of the corresponding spacing tokens
marginLeftSpacingsets margin-left to one of the corresponding spacing tokens
marginRightSpacingsets margin-right to one of the corresponding spacing tokens
marginTopSpacingsets margin-top to one of the corresponding spacing tokens
asHTML Tag or React Component, e.g. div, span, etc.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes