Components

Text

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

import { Text } from '@sproutsocial/racine'

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

NameTypeDefaultDescriptionRequired?
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
breakWordboolean
Controls the CSS word-break property
truncatedboolean
Truncates text into a single line with ellipsis
childrenReact.Node
qaObject

Subcomponents

Headlines

Headlines are used to title a written piece of content.

Bylines

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

Body copy

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

Recipes

A general example

Custom font sizes

Truncated text