Intro
When to Use
Do
Use the title:
- To display a title above a table or form.
- To show headings in the page header.
Don't
Don’t use the title:
- If text is inside a text block. Use normal text instead.
- If text is inside a form element. Use the label instead.
Types
Header Level
Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more important the title is.
Even if titles presented on the page in a mixed order for visual appeal, assigning them to the correct header level ensures that the semantic meaning of the title is described correctly for screen reader users.
https://www.sap.com/design-system/live-examples/Title/Title_LE_VariantsOfHeaderLevels.html
Title variants for different header levels
Header Style
The style of each header level depends on the theme being used and the specific use case. As a result, different styles may be used for titles with the same header level.
https://www.sap.com/design-system/live-examples/Title/Title_LE_VariantsOfHeaderStyles.html
Header levels with different header styles
Title as a Link
https://www.sap.com/design-system/live-examples/Title/Title_LE_TitleAsLink.html
Title on different title level as a link – live example
Responsive Behavior
Wrapping and Truncation
You can define whether the text should wrap or truncate when there is not enough space.
For example:
- If the title is placed outside components like a toolbar, shell bar, or dialog (dialog header), use wrapping.
- If the component is designed to save vertical space, and only allows one line of the text with a limited width (like the title of a toolbar), use truncation.
https://www.sap.com/design-system/live-examples/Title/Title_LE_WrappedAndTruncatedTitle.html
Wrapped and truncated titles