Card

Cards provide the possibility to display content composed of different elements.

Usage

When to use

Use a card in the following cases:

  • To present a summary and link to additional details and information.
  • To group information into logical chunks.
  • When the card surface itself is an interactive element.
  • To create flexible layouts.
  • To display information of one topic.
  • To create a dashboard or show a variety of content types at the same time.

Types

There are the following card types:

Card

  • Unlike a container a card is a summary that leads to additional details and information.
  • Use a card as interactive element (clickable as a complete object) when it only has one action.
  • The card itself is the interactive element.

Card
Simple card

Card with additional actions

  • Use a card with additional actions when the card has more than one action.
  • Unlike a simple card this type of card is not the interactive/clickable element itself.

Card with additional actions
Card with additional actions

General construction

A card consists of the following elements:

General construction
1. Header, 2. Content, 3. Footer, 4. Background

1. Header (optional)

  • Can contain a supporting visual, title, subline, icons or actions.

2. Content (optional)

  • Can be an image, video, chart, key value pair or any other data visualisation, text, list, table, dividers.
  • Mix multiple content types where necessary, to create the card you need.
  • Can contain additional content like buttons, badges, icons, actions or meta information.

4. Background

  • The background has several elevation states. These elevation states (shadows) help indicating a card and the interactivity of it.
  • The background is required.

Header construction

Header construction
1. Title, 2. Subline, 2. Menu

  1. Use a title (optional) to explain the context of a card.
  2. Use a subline (optional) to give additional content-related information.
  3. Use a menu (optional) to place additional actions.

Footer construction
1. Footer content

  • Card footers (optional) can contain buttons. The type of button depends on the importance of the action. This can be a mix of primary, secondary or ghost buttons. All of these can be icon-only buttons.
  • Use primary buttons sparingly on one screen.

Options

The following card options are available:

Card content

Individual cards can be created if the default arrangements don’t fit to create a card you need.

It is recommended to use content like image, video, chart, key value pair or any other data visualisation, list, table, dividers, text.

It is not recommended to put forms or containers into cards.

Card text alignment

Card text alignment
1. Left, 2. Center

Custom background color

By default all cards have a white background color. It is possible to change the background color to any color needed.

Custom background color
Custom background color

Behavior

Card

The whole card is clickable and leads to further information.

Card
Simple card - clickable area

Card with additional actions

There has to be at least one action that leads to further information.

Card with additional actions
Card with additional actions - clickable areas

Card scrolling

It is possible to individually set the height of the cards. If there is more content then available space the content is scrollable.

Card scroll area
Card scroll area

Do’s & Don’ts

Show cards next to each other, in a list or in a grid or group them in a container.

Do not nest cards in cards

  • Show cards next to each other, in a list or in a grid or group them in a container.
  • Do not nest cards in cards.

Try to use equal heights.

Do not use too many variable heights

  • Try to use equal heights in one row and equal gutter widths over all rows.
  • Do not use too many variable heights and gutter widths.

Style

This chapter shows several card styles in the design system.

Overview

Card states

Card states
1. default, 2. mouseover, 3. pressed, 4. disabled, 5. focused

Card example arrangement
Card example arrangement

Card center aligned
Card center aligned

Card with chart, title and subline.
Card with chart, title and subline

Color

The following table gives reference to the different colors and shades:

Name State Property Color name Modification
Title all Foreground color Gray 800  
Subline all Foreground color Gray 400  
Background all Background color White/Custom  
Background shadow layer default Box shadow Black 0 2px 10px 0 rgba(0,0,0,0.5)
Background shadow layer mouseover, selected/focused, pressed Box shadow Black 0 3px 20px 0 rgba(0,0,0,0.5)
Background all Border color 1px Gray 250  
Background selected/focused Border color 2px Cool blue  

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
Title all Siemens Sans Bold 17px 23px left, center
Subline all Siemens Sans Regular 14px 20px left, center

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing

By default cards have a dynamic height. The card height should be an increment of 8px. Cards should have equal heights when they are used in one row.

Sizing for cards
Sizing for cards

Spacing for cards
Spacing for cards

Rounded corners
Rounded corners

Shadow layer

Shadow layers
1. default, 2. mouseover, 3. pressed, 4. focused

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top