UI5 Web Components
Search

Title

@ui5/webcomponents
<ui5-title>

Title in All Available Levels

Title level 1 Title level 2 Title level 3 Title level 4 Title level 5 Title level 6 
<ui5-title level="H1">Title level 1</ui5-title>
<ui5-title level="H2">Title level 2</ui5-title>
<ui5-title level="H3">Title level 3</ui5-title>
<ui5-title level="H4">Title level 4</ui5-title>
<ui5-title level="H5">Title level 5</ui5-title>
<ui5-title level="H6">Title level 6</ui5-title>

Overview

The ui5-title component is used to display titles inside a page. It is a simple, large-sized text with explicit header/title semantics.

ES6 Module Import

import "@ui5/webcomponents/dist/Title";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
level
TitleLevel
"H2"
Defines the component level. Available options are: "H6" to "H1".
wrappingType
wrapping-type
WrappingType
"None"
Defines how the text of a component will be displayed when there is not enough space. Available options are:
  • None - The text will be truncated with an ellipsis.
  • Normal - The text will wrap. The words will not be broken based on hyphenation.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the component.

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel