Examples
Examples
☝️ Watch Out
Displaying Texts requires the related font face definitions to be loaded.
Find out how to embed Font Faces
Basic usage
Texts can render at different sizes, weights, and contrasts to create structure.
💡 Did you know?
The visual appearance of a Text is decoupled from its semantic meaning. That means that a Text of small size can still be promoted to the upper range of the semantical hierarchy of a document by setting the tag that is used to mount it to the DOM.
Truncation
Text can be limited to any number of lines.
💡 Did you know?
When Text is used inside a flex layout, the flex child holding the Text requires the width to be set to a specific value or 100% and the overflow to be hidden in order for the single-line clamp to work correctly.
Rich formatting
Texts do support rich formattings such as strong, emphasis, or hyperlinks.
💡 Did you know
Even though most user agents display texts that are rendered inside a <b> or <strong> tags equally to sighted users, screen readers will make a difference and will only accentuate content within <strong> tags.
Rich formatting in Nested Content
The Text component's rich formatting is limited to top-level elements. To apply similar styling to nested elements, specific global CSS rules are necessary.
The following example illustrates the use of global CSS and foundational primitives to extend rich formatting to nested slotted elements within the Text component, ensuring consistent visual presentation.
Alignment
The CSS text-align is one of the few styles that are inherited by text nodes inside web components. Setting an alignment on a Text component or any of its parents will allow controlling the horizontal alignment of its content.
Spacing and Vertical Rhythm
While Text elements inside user interfaces are layouted using specific spacings to control their proximity, the spacing between pairings of Texts and Titles in long-form reads are automatically determined based on their size to follow a vertical rhythm and preserve legibility and structure.
Appearance
By default, the Text adapts to a light mode environment by appearing dark. When in a dark mode environment, the Text should appear light instead.
The appearance of a Text can be set using the appearance property or by nesting it into a cosmos-mode component. Read more about the Mode & Appearance concept.
Responsive Size
While Texts are automatically adapting their font size using the fluid typography concept, sometimes the same Text element should render at a very different size at different breakpoints.
The Text's size property does support Responsive Properties syntax.
💡 Pro Tip
Open this page in a new browser window and resize it to simulate different breakpoints.
Localization
The Text component is aware of the language of the text displayed and picks the most optimal font family for rendering it.
☝️ Watch Out
Displaying Texts requires the related font face definitions to be loaded.
Find out how to embed Font Faces