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="Transparent" 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

Telecomunicaciones Star

Talpa

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>

<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">
		<ui5-li description="ID234522566-D44" additional-text="27.25K EUR" additional-text-state="Success">Avantel</ui5-li>
		<ui5-li description="ID7125852785-A51" additional-text="22.89K EUR" additional-text-state="Warning">Telecomunicaciones Star</ui5-li>
		<ui5-li description="ID123555587-I05" additional-text="7.85K EUR" additional-text-state="Error">Talpa</ui5-li>
	</ui5-list>
</ui5-card>

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

<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:

root - Used to style the root DOM element of the CardHeader
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.

subtitleText
subtitle-text

string

Defines the subtitle text.

titleText
title-text

string

Defines the title text.

Slots

Slot

Type

Description

action

HTMLElement [0..n]

Defines an action, displayed in the right most part of the header.

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:

Morning Horizon (Light)

Evening Horizon (Dark)

Horizon High Contrast Black

Horizon High Contrast White

Quartz Light

Quartz Dark

Quartz High Contrast Black

Quartz High Contrast White

Content Density:

Cozy

Compact

Text Direction:

LTR

RTL

Apply

Cancel