Basic usage
Different styles of text construct the hierarchy of web pages which highly influences the user experience for our users.
The Text component follows the scale defined in foundations, however it is preferred to
use one of the following
Heading
Use TextHeading for titles and headers. The level prop should be used to indicate semantic meaning vs size. It maps to the heading
tag (e.g. level={2} === <h2/>). size should not dictate level
Body
Use TextBody for readable text
Notation
Muted and Colorful text
Use color, in conjunction with the color scales to mute or add emphasis to your text.
Props
HeadingSystem Props
COMMONTYPOGRAHYFLEXPOSITION- Learn More
| Name | Type | Description |
BodySystem Props
COMMONTYPOGRAHYFLEXPOSITION- Learn More
| Name | Type | Description |
TextSystem Props
COMMONTYPOGRAHYFLEXPOSITION- Learn More
| Name | Type | Description |
size | "small" | "inherit" | "large" | "medium" | "megaPlus" | "mega" | "xLarge" | "mediumPlus" | "smallPlus" | "xSmall" | "tiny" | - medium |
overflowWrap | "normal" | "anywhere" | "break-word" | - |
lineClamp | number | - |
textDecoration | string | - |
Accessibility
- Use semantic tags to represent hierarchy