Skip to main content

Card

<ui5-card>

The ui5-card is a component that represents information in the form of a tile with separate header and content areas. The content area of a ui5-card can be arbitrary HTML content. The header can be used through slot header. For which there is a ui5-card-header component to achieve the card look and feel.

Note: We recommend the usage of ui5-card-header for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.

ES6 Module Import​

import "@ui5/webcomponents/dist/Card.js";

import "@ui5/webcomponents/dist/CardHeader.js"; (for ui5-card-header)

Basic Sample​

Properties​

accessibleName​

DescriptionDefines the accessible name of the component, which is used as the name of the card region and should be unique per card.
Note: accessibleName should be always set, unless accessibleNameRef is set.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.16

accessibleNameRef​

DescriptionDefines the IDs of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.16

loading​

DescriptionDefines if a loading indicator would be displayed over the card.
Typeboolean
Defaultfalse
Since2.1.0

loadingDelay​

DescriptionDefines the delay in milliseconds, after which the loading indicator will show up for this card.
Typenumber
Default1000
Since2.1.0

Slots​

default​

DescriptionDefines the content of the component.
TypeArray<HTMLElement>
DescriptionDefines the header of the component.
Note: Use ui5-card-header for the intended design.
TypeArray<CardHeader>
Since1.0.0-rc.15

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
rootUsed to style the root DOM element of the card component
contentUsed to style the content of the card

More Samples​

List Card​

Table Card​

Timeline Card​

Object Card​