Text
The basic text primitive for rendering things like paragraphs and headings.
Basic variants
Sancho comes with a number of basic text variants. You should try to stick with these as often as possible.
Basic text
Uppercase variant
Hidden variantParagraph variant
Subtitle variant
Lead variant
H6 variant
h5 variant
h4 variant
h3 variant
h2 variant
h1 variant
display3 variant
display2 variant
display1 variant
<div> <Text>Basic text</Text> <Text variant="uppercase">Uppercase variant</Text> <Text variant="hidden">Hidden variant</Text> <Text variant="paragraph">Paragraph variant</Text> <Text variant="subtitle">Subtitle variant</Text> <Text variant="lead">Lead variant</Text> <Text variant="h6">H6 variant</Text> <Text variant="h5">h5 variant</Text> <Text variant="h4">h4 variant</Text> <Text variant="h3">h3 variant</Text> <Text variant="h2">h2 variant</Text> <Text variant="h1">h1 variant</Text> <Text variant="display3">display3 variant</Text> <Text variant="display2">display2 variant</Text> <Text variant="display1">display1 variant</Text> </div>
Other options
I will have no margin, and I won't wrap.
<div> <Text variant="paragraph" gutter={false} wrap={false}> I will have no margin, and I won't wrap. </Text> </div>
Show Code
API
Text
variantTextVariants
The text style
wrapboolean
Use text-overflow: ellipsis styling when set to false
mutedboolean
Use muted colors
gutterboolean
Set to false to remove any bottom margins
componentReactType<TextProps>
cssInterpolationWithTheme<any>