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 #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| as | union | ||
| children | node | ||
| lines | number | ||
| variant | "h0" "h1" "h2" "h3" "h4" "h5" "h6" "body1" "body2" "body3" "body4" "subtitle1" "subtitle2" "meta1" "meta2" | body2 |
Dependencies #
- - @welcome-ui/system^3.0.0
Peer dependencies #
- - @xstyled/styled-components^2.2.3
- - @xstyled/system^2.2.3
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1