The ui5-card-header
is a component, meant to be used as a header of the ui5-card
component.
It displays valuable information, that can be defined with several properties, such as: titleText
, subtitleText
, status
and two slots: avatar
and action
.
Keyboard handling​
In case you enable interactive
property, you can press the ui5-card-header
by Space and Enter keys.
ES6 Module Import​
import "@ui5/webcomponents/dist/CardHeader";
Properties​
titleText​
Description | Defines the title text. |
Type | string |
Default | "" |
subtitleText​
Description | Defines the subtitle text. |
Type | string |
Default | "" |
Description | Defines the status text. |
Type | string |
Default | "" |
interactive​
Description | Defines if the component would be interactive, e.g gets hover effect, gets focus outline and click event is fired, when pressed. |
Type | boolean |
Default | false |
Description | Defines an avatar image, displayed in the left most part of the header. |
Type | Array<HTMLElement> |
Description | Defines an action, displayed in the right most part of the header. |
Type | Array<HTMLElement> |
Description | Fired when the component is activated by mouse/tap or by using the Enter or Space key. Note: The event would be fired only if the interactive property is set to true. |
Type | CustomEvent |
Methods​
No methods available for this component.
CSS Parts​
Name | Description |
---|
root | Used to style the root DOM element of the CardHeader |
title | Used to style the title of the CardHeader |
subtitle | Used to style the subtitle of the CardHeader |
status | Used to style the status of the CardHeader |