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";

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
Default	""
Since	1.0.0-rc.16

accessibleNameRef

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

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<ICardHeader>
Since	1.0.0-rc.15

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

Name	Description
root	Used to style the root DOM element of the card component
content	Used to style the content of the card

More Samples

List Card

Table Card

Timeline Card

Object Card