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
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 and click event is fired, when pressed. |
| Type | boolean |
| Default | false |
subtitleText
| Description | Defines the subtitle text. |
| Type | string | undefined |
| Default | undefined |
titleText
| Description | Defines the title text. |
| Type | string | undefined |
| Default | undefined |
Slots
action
| Description | Defines an action, displayed in the right most part of the header. |
| Type | Array<HTMLElement> |
avatar
| Description | Defines an avatar image, displayed in the left most part of the header. |
| Type | Array<HTMLElement> |
Events
click
| 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 |
| Bubbles | Yes |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.
| Name | Description |
|---|
| additional-text | Used to style the additional text of the CardHeader |
| root | Used to style the root DOM element of the CardHeader |
| subtitle | Used to style the subtitle of the CardHeader |
| title | Used to style the title of the CardHeader |
CSS Custom States
No CSS custom states available for this component.