Intro

Cards are containers for a few short, related pieces of information. They can also serve as an entry point, with a preview of the most pertinent information or a teaser pointing to more details on a given topic or issue.

Card design in the web card system

Consistent Framework, Flexible Content

The web card system provides definitions for several building blocks to create a variety of different cards. It is composed of optional block elements with an extendable set of UI components within the card header and footer. The card body can show any combination of UI components. In contrast to specific card types, this more modular approach enables you to fulfill specific product requirements by allowing a flexible combination of UI components (like a list, calendar, KPI, and more). At the same time, the system ensures consistency by offering an enhanced set of predefined building blocks. It has been designed to work with flexible sizes for multiple form factors and grid layouts.

When to Use

Top Tips

• Don’t overload the user by including an excessive number of UI elements within a card. A card should present information in a compact and easily scannable format.
• Don’t place unrelated elements within a card.
• Indicate clearly which parts of the cards are interactive and make them consistent with other cards in the same environment.
• Don’t put a scrollbar inside the card. The card is used to convey a key message on one subject. Users can navigate to the detail view for the full list or content.
• Don’t mix different navigation or interaction paradigms within a set of cards in one section or on the same page.
• Don’t try to build complex, small apps inside the card that require navigation flows. It doesn’t hurt users to quickly navigate away from a page to better focus on a task.

Anatomy

undefined

Schematic card anatomy (left) and anatomy of an example card (right)

1. Card Canvas: The card canvas is the element that holds the media, header, body, and footer of the card. The usage of these blocks is optional, but recommended.
2. Card Header: The card header contains essential information about the card and its associated detail page content. It provides a quick overview of key details, such as the title, subtitle, and status of the card.
   For more information, see the Card Header article.
3. Card Body: The card body is the central part of a card that is used to provide additional information alongside the content shown in the card header. This allows you to present in-depth details, data, or graphics relevant to the card context.
4. Card Footer: The card footer, located at the bottom of the card, is used for important or routine actions that directly impact the card functionality, such as “Approve’ or “Submit” actions.
5. Media: You can add media to highlight a card, combining it flexibly with other blocks. As an optional decorative element, media allows you to include an image that matches the card context. The media block can contain a background color or an image that spans the entire width of the card. It can also display a combination of an image and a text block with a solid background (for example, in cards with larger dimensions).
   For more information, see the Media article.
6. Badge: You can use badges to display brief and important information about card status, such as New, Updated, or Pinned (icon).
   For more information, see the Badge article.

Types

The flexible card container allows a variety of cards to be created for any use case.

Examples of card variants

Behavior and Interaction

A card can be interactive, meaning a card can be selected as a whole, or non-interactive, used just as a container. In addition, a card can contain interactive elements.

Interactive Card

When a user selects a card, the visualization of the card changes, giving users clear and immediate feedback on the selection state.

Example: Interactive card with interactive elements (buttons)

1. Regular interactive card
2. Hover on interactive card
3. Press on interactive element

When the user selects a card, the system navigates to a designated page or view that provides more details, such as a list report page or an object details page.

Non-Interactive Card

When a specific element within the card, such as list item or link, is designed to be interactive, it provides a distinct visual indication for its interactivity. Clicking the item or link triggers navigation to a dedicated details page or view for that specific element.

Example: Non-interactive card containing interactive elements (link and buttons)

1. Regular non-interactive card
2. Hover on interactive element
3. Press on interactive element

Navigation

Several options to select a card or elements to navigate to an application, page, or view

Actions on Cards

There are three ways to offer actions on a card.

1. Header: The card context menu in the card header typically houses actions provided by the host environment, such as actions to refresh, favorite, bookmark, or remove the card.
2. Body: Actions that affect the card content are applied close to components in the card body, such as buttons or links in list items.
3. Footer: The footer holds actions that apply to the entity or business object represented by the card, like Approve/Reject for a task, or Add to Cart for a product.

Three options for placing actions on cards, depending on the entity they affect.

Responsive Behavior

Resizing the Card

When the user resizes the card, the header, body, footer, and media elements respond as follows.

Responsive behavior for a card

You can define the card size as fixed (for example, to display cards as tiles) or fill the container. If you opt to fill the container, the card adapts its size according to the size of the container in which it is placed.

Related Links