Text

Text is our base primitive component for any typographic element. You should use it for any headings and all body copy. As with all components, you can pass the as prop to change which underlying dom element it is. The default dom element is span.

Import

import
{
Text
}
from
'@blockstack/ui'
;

Usage

Preview
This is a default instance of Text
Editable example

Text Styles

You can pass a prop of textStyle to any component and it will take on preset values for styling. See the table below for all of the available text style variants. To read more about variants within the context of styled-system, see Variants.

Style
Typeface
Weight
Size
Line
Letter Spacing
Display Large
display.large
Inter
600
24px
1.333
-0.02em
Display Small
display.small
Inter
500
20px
1.4
-0.02em
Body Large Medium
body.large.medium
Inter
500
16px
1.5
-0.01em
Body Large
body.large
Inter
400
16px
1.5
-0.01em
Body Small Medium
body.small.medium
Inter
500
14px
1.4
-0.01em
Body Small
body.small
Inter
400
14px
1.4
-0.01em
Caption Medium
caption.medium
Inter
500
14px
1.4
-0.01em
Caption
caption
Inter
12px
1.333
0.00em

Examples

Preview

This is a primary heading.

This is a secondary heading.

This is a tertiary heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Editable example