Skip to main content

CardHeader

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​

DescriptionDefines the title text.
Typestring
Default""

subtitleText​

DescriptionDefines the subtitle text.
Typestring
Default""

status​

DescriptionDefines the status text.
Typestring
Default""

interactive​

DescriptionDefines if the component would be interactive, e.g gets hover effect, gets focus outline and click event is fired, when pressed.
Typeboolean
Defaultfalse

Slots​

avatar​

DescriptionDefines an avatar image, displayed in the left most part of the header.
TypeArray<HTMLElement>

action​

DescriptionDefines an action, displayed in the right most part of the header.
TypeArray<HTMLElement>

Events​

click​

DescriptionFired 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.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

NameDescription
rootUsed to style the root DOM element of the CardHeader
titleUsed to style the title of the CardHeader
subtitleUsed to style the subtitle of the CardHeader
statusUsed to style the status of the CardHeader