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