To render a Title in a specific variant, provide values to properties according to the API documentation.

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.

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.

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.

The clamp property is used to truncate the title after a specified number of lines, or to a single line when set to true.