Examples
Examples
☝️ Watch Out
Displaying Titles requires the related font face definitions to be loaded.
Find out how to embed Font Faces
Basic usage
To render a Title in a specific variant, provide values to properties according to the API documentation.
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 Title component or any of its parents will allow controlling the horizontal alignment of its content.
Spacing and Vertical Rhythm
Change the appearance
By default, the Title adapts to a light mode environment by appearing dark. When in a dark mode environment, the Title should appear light instead.
The appearance of a Title can be set using the appearance property or by nesting it into a cosmos-mode component. Read more about the Mode & Appearance concept.
Breakpoint specific sizes
Text supports setting different sizes specific for different Breakpoint. The supported pattern is a size followed by breakpoint with both values being separated by an @.
Multiple value pairs can be provided by separating them with an empty space.
size="x-large@small small@medium x-small@large"
💡 Try looking at this example in different viewport sizes to see the responsive property in action.
Clamping
The clamp property is used to truncate the title after a specified number of lines, or to a single line when set to true.