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

Description	Defines 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.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.16

accessibleNameRef

Description	Defines the IDs of the elements that label the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.16

loading

Description	Defines if a loading indicator would be displayed over the card.
Type	boolean
Default	false
Since	2.1.0

loadingDelay

Description	Defines the delay in milliseconds, after which the loading indicator will show up for this card.
Type	number
Default	1000
Since	2.1.0

Slots

default

Description	Defines the content of the component.
Type	Array<HTMLElement>

header

Description	Defines the header of the component. Note: Use ui5-card-header for the intended design.
Type	Array<CardHeader>
Since	1.0.0-rc.15

Events

No events available for this component.

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
content	Used to style the content of the card
root	Used to style the root DOM element of the card component

CSS Custom States

No CSS custom states available for this component.

More Samples

List Card

Table Card

Timeline Card

Object Card