Text

Body text for content.

Overview

Maturity

RC

FYQ2 target

Beta

Repository

Storybook

Text content has the standard visual hierarchy, unlike Headings. It’s typically used to describe the content and add more in-depth information about the subject of a section.

The Text component implements the Body and Kicker typography tokens.

Related content

Properties

Name

Values

Default

align 

Set the horizontal text alignment, based on text-align. Works with dir to correctly set the directionality.

endstartcenter

start

color 

Set the color

'default.main.primary', 'default.main.secondary', 'default.extra.awake', 'default.extra.critical', 'default.extra.dormant', 'default.extra.warning', 'default.extra.success', 'default.extra.featured', 'default.extra.onExtra', 'inverted.primary', 'inverted.secondary'

default.main.primary

dir 

Indicates the directionality of the element's text, based on dir

autoltrrtl

hidden 

Whether an element is completely hidden on the page

boolean

id 

The id of the element

string

inline 

Render text inline instead of as a block

boolean

truncate 

Truncate the text based on it’s width

boolean

type 

The typography style of the text.

defaultdefaultLinkcaptioncaptionLinkkickerleadleadLink

default

whiteSpace 

Set how the white space inside the text is handled, based on white-space

prenormalnowrappre-wrapbreak-spacespre-line

normal

How to use

Any text content that isn’t a Heading should use a Text component. It can be truncated via the truncate property, aligned via align, and even have its whitespace set via whiteSpace.


                                                        
                                                        
                                                            <Text type="lead" truncate>A long time ago in a galaxy far, far away</Text>