Interface of Text
🏗 Coming Soon

By default the <Text /> component will render text wrapped in a <span>, if you need another html element for semantic purposes you can use the element property

By default I am a span

Wrapped in a paragraph tag

Wrapped in a code tag

Text Size

If you need to adjust the font-size of the rendered text, you can use the size property and a value from the type scale

Sized to xxxxlargeSized to xxlargeSized to small

Weight & Transform

Common patterns for text is to adjust the font weight and transform the text. Below is an example of using the weight and textTransform properties to modify the rendered text

A great storyThis is a great headlineSome metadata about this story

Text Variants

We provide a few variants for the <Text /> component based on common patterns we use in our applications, the variant property will change that will change the color the rendered text.

Regular TextSecondary TextSubdued TextCritical TextPositive Text

Text Alignment

You can use the align property to change the alignment of the rendered text, below is an example with aligned text put into <Card />s.

I am aligned left by default

This is how you can center align Paragraph text

This is how you can right align Paragraph text


At times you may want your <Paragraph /> or <Heading /> to truncate instead of the text wrapping, the truncate property will do that for you. For a multiline truncate, use truncateLines (this is not supported in IE11).

Hello there I am a heading that will truncate to one line 🍕🥑🍪🥓

And I am some text that is super long and gets truncated at two lines with an ellipsis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ultrices dolor. Suspendisse nulla purus, condimentum id pharetra vel, aliquet et dui. Mauris elementum sollicitudin risus, eget convallis felis ultrices feugiat. Mauris et ante euismod lacus posuere euismod vel eu ipsum. Fusce iaculis accumsan est, a volutpat magna porta nec.