Text
Use the text component create a range of body text
On this page
On this page
Usage
Use the text component to provide content and a clear hierarchy structure. The text component renders an HTML <span> tag without any default styling. Use <p> for any text that is meant to be a paragraph of text. Use multiple text components to represent paragraphs as distinct blocks of text. This helps with readability and makes it easier for search engines and assistive technologies to understand the content.
Options
Variant
The text component provides two variant options: default and muted. The muted variant is used to de-emphasize text or to provide visual contrast when paired with a title.
Use muted text to de-emphasize text and provide additional context.
Don't use standalone muted text. Muted text should always be paired with emphasized text or a title.
Size
The text size ranges from 100 to 700, with 400 as the default size. This scale is built to provide hierarchy for all types of scenarios.
Use a smaller size to provide visual hierarchy when the text is paired with a title. Use as many text components as needed to represent different blocks of content.
When the text is paired with a title, use a smaller size to provide visual hierarchy.
Alignment
Text alignment options offer a convenient way to control the positioning of content within block level elements.
Available options include start, center, and end, which are recommended for supporting bidirectional reading.
Weight
The text component also supports weight options. Weight is automatically determined by the text size, but can be overridden when the scenario calls for it.
Responsive
The text component is responsive by default and the size will scale down on smaller screens. Weight options will remain the same across all screen sizes but can be overridden for each breakpoint.
Related components
- Heading: to render headings.
- Ordered list: to render ordered lists.
- Unordered list: to render unordered lists.