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, additionalText
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 | undefined |
| Default | undefined |
subtitleText​
| Description | Defines the subtitle text. |
| Type | string | undefined |
| Default | undefined |
additionalText​
| Description | Defines the additional text. |
| Type | string | undefined |
| Default | undefined |
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 |
| additional-text | Used to style the additional text of the CardHeader |