Card

@ui5/webcomponents
<ui5-card>

Card with List

View All
Alain Chevalier Monique Legrand Isabella Adams
Richard Wilson Elena Petrova John Miller
<style>
.card-content {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
</style>

<ui5-card class="medium">
	<ui5-card-header slot="header" title-text="Team Space" subtitle-text="Direct Reports" status="3 of 10">
				<ui5-icon name="group" slot="avatar"></ui5-icon>
				<ui5-button design="Emphasized" slot="action">View All</ui5-button>
	</ui5-card-header>
	<div class="card-content">
		<ui5-list separators="None" class="card-content-child" style="width: 100%; margin-bottom: 0.75rem;">
			<ui5-li image="../../../assets/images/avatars/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
			<ui5-li image="../../../assets/images/avatars/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
			<ui5-li image="../../../assets/images/avatars/woman_avatar_2.png" description="UX Specialist">Isabella Adams</ui5-li>
		</ui5-list>

	</div>
</ui5-card>
<ui5-card class="medium">
		<ui5-card-header slot="header" title-text="This header is interactive" interactive subtitle-text="Click, press Enter or Space" status="3 of 6">
				<ui5-icon name="group" slot="avatar"></ui5-icon>
		</ui5-card-header>
	<div class="card-content">
		<ui5-list separators="None" class="card-content-child" style="width: 100%; margin-bottom: 0.75rem;">
			<ui5-li image="../../../assets/images/avatars/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
			<ui5-li image="../../../assets/images/avatars/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
			<ui5-li image="../../../assets/images/avatars/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
		</ui5-list>
	</div>
</ui5-card>
	

Card with Table

Sales Order Customer Net Amount Status 5000010050 Entertainment Argentinia 6k USD Aproved 5000010051 Brazil Techologies 2k USD Rejected 5000010052 Robert Brown Ent. 17k USD Pending
<style>
.status-error {color: #b00;}
.status-warning {color: #e9730c;}
.status-success {color: #107e3e;}
</style>
<ui5-card class="medium">
	<ui5-card-header slot="header" title-text="New Purchase Orders" subtitle-text="Today" status="3 of 15">
	</ui5-card-header>
	<ui5-table class="demo-table content-padding">
		<!-- Columns -->
		<ui5-table-column slot="columns">
			<ui5-label>Sales Order</ui5-label>
		</ui5-table-column>

		<ui5-table-column slot="columns">
			<ui5-label>Customer</ui5-label>
		</ui5-table-column>

		<ui5-table-column slot="columns">
			<ui5-label>Net Amount</ui5-label>
		</ui5-table-column>

		<ui5-table-column slot="columns" min-width="450" popin-text="Status" demand-popin>
			<ui5-label>Status</ui5-label>
		</ui5-table-column>

		<!-- Rows -->
		<ui5-table-row >
			<ui5-table-cell>
				<ui5-label>5000010051</ui5-label>
			</ui5-table-cell>
			<ui5-table-cell>
				<ui5-label>Brazil Techologies</ui5-label>
			</ui5-table-cell>
			<ui5-table-cell>
					<ui5-label>2k USD</ui5-label>
			</ui5-table-cell>
			<ui5-table-cell>
				<span class="status-error">Rejected</span>
			</ui5-table-cell>
		</ui5-table-row>
		...
	</ui5-table>
</ui5-card>
	

Card with Timeline

MR SOF02 2.43 Online meeting
<ui5-card class="meidum">
		<ui5-card-header slot="header" title-text="Upcoming Activities" subtitle-text="For Today">
		</ui5-card-header>
	<ui5-timeline>
		<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
		<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
			MR SOF02 2.43
		</ui5-timeline-item>
		<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="calendar">
			Online meeting
		</ui5-timeline-item>
	</ui5-timeline>
</ui5-card>
	

More Cards

Personal Development Finance Communications Skills
Avantel ID234522566-D44
27.25K EUR
Telecomunicaciones Star ID7125852785-A51
22.89K EUR
Talpa ID123555587-I05
7.85K EUR
Contact details
Company Name Company A
Address 481 West Street, Anytown 45066, USA
Website www.company_a.example.com
<ui5-card class="small">
	<ui5-card-header slot="header" title-text="David Willams" subtitle-text="Sales Manager" >
				<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
	</ui5-card-header>

	<ui5-list separators="Inner" class="content-padding">
		<ui5-li icon="competitor" icon-end>Personal Development</ui5-li>
		<ui5-li icon="wallet" icon-end>Finance</ui5-li>
		<ui5-li icon="collaborate" icon-end>Communications Skills</ui5-li>
	</ui5-list>
</ui5-card>

<style>
.content,
.content-group {
	display: flex;
	flex-direction: column;
	padding-bottom: 1rem;
}
</style>

<style>
.item {display: flex;width: 100%;justify-content: space-between;}
.item-content-begin {display: flex;flex-direction: column;}
.item-content-begin-title {padding-bottom: 0.25rem;}

.status-error {color: #b00;}
.status-warning {color: #e9730c;}
.status-success {color: #107e3e;}
</style>

<ui5-card class="small">
	   <ui5-card-header slot="header" title-text="Project Cloud Transformation" subtitle-text="Revenue per Product | EUR" status="3 of 3">
	   </ui5-card-header>
	<ui5-list separators="None" class="content-padding">
		<ui5-li-custom>
			<div class="item">
				<div class="item-content-begin">
					<ui5-title level="H5" class="item-content-begin-title">Avantel</ui5-title>
					<ui5-label>ID234522566-D44</ui5-label>
				</div>
				<div class="item-content-end">
					<span class="status-success">27.25K EUR</span>
				</div>
			</div>
		</ui5-li-custom>
		...
	</ui5-list>
</ui5-card>

<ui5-card class="small">
	<ui5-card-header slot="header" title-text="Dona Maria Moore" subtitle-text="Senior Sales Executive">
		<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
	</ui5-card-header>

	<div class="content content-padding">
		<ui5-title level="H5" style="padding-bottom: 1rem;">Contact details</ui5-title>

		<div class="content-group">
			<ui5-label>Company Name</ui5-label>
			<ui5-title level="H6">Company A</ui5-title>
		</div>
		<div class="content-group">
			<ui5-label>Address</ui5-label>
			<ui5-title level="H6">481 West Street, Anytown 45066, USA</ui5-title>
		</div>
		<div class="content-group">
			<ui5-label>Website</ui5-label>
			<ui5-link target="_blank">www.company_a.example.com</ui5-link>
		</div>
	</div>
</ui5-card>
	

Overview

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 fill. Note: We recommend the usage of ui5-card-header for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
String
""
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.
since v1.0.0-rc.16
accessibleNameRef
accessible-name-ref
String
""
Defines the IDs of the elements that label the component.
since v1.0.0-rc.16

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the content of the component.
header
HTMLElement [0..n]
Defines the header of the component.

Note: Use ui5-card-header for the intended design.

CardHeader

Overview

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.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-card exposes the following CSS Shadow Parts:
  • title - Used to style the title of the CardHeader
  • subtitle - Used to style the subtitle of the CardHeader
  • status - Used to style the status of the CardHeader

ES6 Module Import

import "@ui5/webcomponents/dist/CardHeader";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
interactive
boolean
false
Defines if the component would be interactive, e.g gets hover effect, gets focus outline and click event is fired, when pressed.
status
string
""
Defines the status text.

Note: If the action slot is set, the status will not be displayed, you can either have action, or status.
subtitleText
subtitle-text
string
""
Defines the subtitle text.
titleText
title-text
string
""
Defines the title text.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
action
HTMLElement [0..n]
Defines an action, displayed in the right most part of the header.

Note: If set, the status text will not be displayed, you can either have action, or status.
avatar
HTMLElement [0..n]
Defines an avatar image, displayed in the left most part of the header.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
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.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel