Card

@ui5/webcomponents
<ui5-card>

Card with List

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

<ui5-card avatar="group" heading="Team Space" subheading="Direct Reports" status="3 of 10" class="medium">
	<div class="card-content">
		<ui5-list separators="None" class="card-content-child" style="width: 100%">
			<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">Michael Adams</ui5-li>
		</ui5-list>

	</div>
</ui5-card>
<ui5-card avatar="group" heading="This header is interactive" header-interactive subheading="Click, press Enter or Space" status="3 of 6" class="medium">
	<div class="card-content">
		<ui5-list separators="None" class="card-content-child" style="width: 100%">
			<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 heading="New Purchase Orders" subheading="Today" status="3 of 15" class="medium">
	<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
	heading="Upcoming Activities"
	subheading="For Today"
	class="meidum">
	<ui5-timeline>
		<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-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 heading="David Willams" subheading="Sales Manager" class="small">
	<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
	
	<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 heading="Project Cloud Transformation" subheading="Revenue per Product | EUR" status="3 of 3" class="small">
	<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 heading="Dona Maria Moore" subheading="Senior Sales Executive" class="small">
	<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
	
	<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 several properties, such as: heading, subheading, status and two slots: avatar and action.

Keyboard handling

In case you enable headerInteractive property, you can press the ui5-card header by Space and Enter keys.

ES6 Module Import

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

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
headerInteractive
header-interactive
boolean
false
Defines if the ui5-card header would be interactive, e.g gets hover effect, gets focused and headerPress event is fired, when it is pressed.
heading
string
""
Defines the title displayed in the ui5-card header.
status
string
""
Defines the status displayed in the ui5-card header.

Note: If the action slot is set, the status will not be displayed, you can either have action, or status.
subheading
string
""
Defines the subheading displayed in the ui5-card header.

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 the visual representation in the header of the card. Supports images and icons.

Note: SAP-icons font provides numerous options. To find all the available icons, see the Icon Explorer.
default
HTMLElement [0..n]
Defines the content of the ui5-card.

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
header-click
Fired when the ui5-card header is activated by mouse/tap or by using the Enter or Space key.

Note: The event would be fired only if the headerInteractive property is set to true.
since v0.10.0
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel