Text Component
The text component is a p
tag with easy styling baked in.
Usage
Some best practices for using the Text
component include:
- Don't use this for headings.
- Do use this for body text, captions, etc.
- Stick to the gray scale for text colors. This can be defined with the
color
prop.
Sizes
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Editable Example
Outlier cases
Truncation
Cutting off a line and adding ...
to indicate that there is more that is not being shown is called Truncation. Its a great way to keep all of your content the same length especially if different people are designing, writing copy, and coding a component.
Here is some really long text that will be broken off before the second line starts.
Editable Example
as Prop
ItalicUnderlineI18NCitationDeletedEmphasisInsertedCtrl + CHighlightedStrikethroughsubSamplesup
Editable Example