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 ui5-title level. Available options are: "H6" to "H1".
wrap
boolean
false
Defines whether the ui5-title would wrap.

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 ui5-title.

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