This component is used to render text in a variety of styles based on Seeds values.
import { Text } from '@sproutsocial/racine'
<Text>
Cultivate.
</Text>
By default, the Text component renders text in a span tag. You can change this with the “as” prop. In addition, Text will inherit its font size from its parent unless a size is set with the fontSize prop.
Properties
Name
Type
Default
Description
Required?
fontSize
100
200
300
400
500
600
700
800
900
1000
1100
1200
Maps to the typeScale system prop, sets font size and line height using Seeds values
breakWord
boolean
Controls the CSS word-break property
truncated
boolean
Truncates text into a single line with ellipsis
children
React.Node
qa
Object
Subcomponents
Headlines
Headlines are used to title a written piece of content.
Body copy is used for long form written content like sentences and paragraphs.
<Box>
<Text.BodyCopyas="p"mb={400}>Our customers choose Sprout because of the craftsmanship and care we put into our work, our products and our relationship with them.</Text.BodyCopy>
<Text.SmallBodyCopyas="p">We solve hard problems in thoughtful, elegant ways to provide remarkable experiences for our customers and team.</Text.SmallBodyCopy>
</Box>
Recipes
A general example
<Box>
<Text.Headlineas="h1"mb={100}>Get more followers on TikTok in2021</Text.Headline>
<Text.BodyCopyas="p">One of the newest social media platforms to the scene, TikTok, is all about creating short and engaging viral video content. But for brands that are just starting out, it feels like it can take ages to grow a healthy following.</Text.BodyCopy>
</Box>
Custom font sizes
<Boxdisplay="flex"alignItems="baseline">
<TextfontSize={400}mr={200}>
Always
</Text>
<TextfontSize={200}mr={200}>
be
</Text>
<TextfontSize={700}>
growing!
</Text>
</Box>
Truncated text
<Text.BodyCopytruncated>
Complexity is a tax on everything we do. We strive to make our products, our processes, our policies and our operations as free from complexity as possible, allowing us the agility to grow, adapt and thrive. In our products, complexity is a tax on our customers, and we seek elegant solutions that enhance their work.