Maturity
This component is for Code only. In Figma, rely instead on Text Styles.
Overview
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. |
end, start, center |
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' |
|
|
dir Indicates the directionality of the element's text, based on dir |
auto, ltr, rtl |
– |
|
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. |
default, defaultLink, caption, captionLink, kicker, lead, leadLink |
default |
|
whiteSpace Set how the white space inside the text is handled, based on white-space |
pre, normal, nowrap, pre-wrap, break-spaces, pre-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>