Text

Components

Code

This component is used to render text in a variety of styles based on Seeds values.

import { Text } from '@sproutsocial/racine'

<Text>
  Cultivate.
</Text>

<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	Description
`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.

<Box>
  <Text.Headline as="h1">Headline</Text.Headline>
  <Text.SubHeadline as="h2">Subheadline</Text.SubHeadline>
  <Text.SmallSubHeadline as="h3">Small subheadline</Text.SmallSubHeadline>
</Box>

<Box>
  <Text.Headline as="h1">Headline</Text.Headline>
  <Text.SubHeadline as="h2">Subheadline</Text.SubHeadline>
  <Text.SmallSubHeadline as="h3">Small subheadline</Text.SmallSubHeadline>
</Box>

Bylines

Bylines are a subtext used for complementary information like date, author, etc.

<Box>
  <Text.Byline as="h4">Byline</Text.Byline>
  <Text.SmallByline as="h5">Small Byline</Text.SmallByline>
</Box>

<Box>
  <Text.Byline as="h4">Byline</Text.Byline>
  <Text.SmallByline as="h5">Small Byline</Text.SmallByline>
</Box>

Body copy

Body copy is used for long form written content like sentences and paragraphs.

<Box>
  <Text.BodyCopy as="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.SmallBodyCopy as="p">We solve hard problems in thoughtful, elegant ways to provide remarkable experiences for our customers and team.</Text.SmallBodyCopy>
</Box>

<Box>
  <Text.BodyCopy as="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.SmallBodyCopy as="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.Headline as="h1" mb={100}>Get more followers on TikTok in 2021</Text.Headline>
  <Text.Byline as="h1" mb={400}>By Chloe West</Text.Byline>
  <Text.BodyCopy as="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>

<Box>
  <Text.Headline as="h1" mb={100}>Get more followers on TikTok in 2021</Text.Headline>
  <Text.Byline as="h1" mb={400}>By Chloe West</Text.Byline>
  <Text.BodyCopy as="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

<Box display="flex" alignItems="baseline">
  <Text fontSize={400} mr={200}>
    Always 
  </Text>
  <Text fontSize={200} mr={200}>
    be 
  </Text>
  <Text fontSize={700}>
    growing! 
  </Text>
</Box>

<Box display="flex" alignItems="baseline">
  <Text fontSize={400} mr={200}>
    Always 
  </Text>
  <Text fontSize={200} mr={200}>
    be 
  </Text>
  <Text fontSize={700}>
    growing! 
  </Text>
</Box>

Truncated text

<Text.BodyCopy truncated>
  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.
</Text.BodyCopy>

<Text.BodyCopy truncated>
  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.
</Text.BodyCopy>