- Text: Displayed text with defined configuration.
When to use this component
- Use for content-level copy where hierarchy, semantics, and variants matter (titles, body text, text inside Cards, Modals).
When not to use this component
- Inside simple components where text doesn’t require additional structure or hierarchy (Button, Badge). In these cases, applying typography styles directly with tokens is sufficient, and an extra node from Text adds no value.
Best Practices
Stick to the provided colors and types.
Don't modify the values of Text. Modifying them will break the balance and hierarchy on the page.
Use a tag that reflects the role of the text on the page (e.g., body with p, section heading with an h tag)
Don’t mismatch variants and tags (e.g., body with h1)
Responsive Behavior
Text component automatically adapts it’s scale for mobile devices. Read more about typography scale.
Styles
Colors
Text component supports all colors from our foreground palette. Read more about colors.
Sizes
Display Heading
Top-level heading. Use it for main titles on the page.
Section Heading
Top-level title of the section. Use it as a title for i.e. Cards or Modal components.
Sub-section Heading
Use for titles when a section needs to be divided into other sub-sections.
Body
Default style for content. Use for paragraphs or longer text blocks in the main reading flow.
Body-emphasis
Default style for labels and emphasized content. Use for short text that needs distinction or for highlighting key parts of body copy.
Caption
Compact style for supplementary information. Use in tight spaces where secondary details are needed.
Caption-emphasis
A heavier-weight caption style. Use when secondary information should stand out slightly more.
Content Guidelines
For further information, see the Content Styleguide.