Text

The Text component allows you to remain consistent with your text sizing and line-height. To add additional padding/margins use the space values from xstyled.

Install and import

Typography

Heading 0

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body 1

Body 2

Body 3

Body 4

Subtitle 1

Subtitle 2

Meta 1

Meta 2

Bring your own tag

You can pass a tag name with as to use that tag type with the styling from another tag. For example…

p tag styled as an H3

H1 tag styled as a body3

Truncation

Set the number of lines you want to display with lines. Your text will be displayed truncated with an ellipsis (...) at the end (if necessary).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis viverra lectus, vel tristique turpis. Vivamus magna nulla, elementum in feugiat feugiat, egestas eget nibh. Ut ac justo vitae dolor iaculis gravida. In eu nisl lorem. Cras eu mauris et tortor suscipit accumsan. Duis ullamcorper nisl a justo ultricies, eu consequat risus imperdiet. Phasellus at metus cursus, fringilla tortor eu, scelerisque quam. Donec efficitur porta elit ac malesuada.

Lorem ipsum dolor sit amet

Properties

NameType(s)DefaultRequired
as
union
children
node
lines
number
variant
"h0"
"h1"
"h2"
"h3"
"h4"
"h5"
"h6"
"body1"
"body2"
"body3"
"body4"
"subtitle1"
"subtitle2"
"meta1"
"meta2"
body2

Dependencies

Peer dependencies