Components/Card/Card

The Card is a container that consists of a Header, Extended Header, Numeric Content, Content and Footer area. It takes the width of its parent. An additional Media Block is optional. The Header could be placed either above or below the Content and is not separated with a line. All building blocks are optional. **Cards can display different types of content, such as:**

Non-interactive cards have role="region". In this case the card can be placed in any container. This role covers the interactive variants: - no interactivity - no interactivity with interactive elements inside (including interactive header).

Non-interactive header

Card Subtitle

1 of 3

Button Button

Interactive Header

Card Subtitle

1 of 3

2 hours ago

Button Button

Card with Media

Card Subtitle

2 hrs ago

Button Button

Request Approval

Marie Johnson

2 of 5

1h ago

Travel to Las Vegas

May 3rd - 5th

3,954.00

EUR

Approve Send Back

For interactive header use the modifier class .fd-card__header--interactive on .fd-card__header.

The role button can be assigned to an interactive card that has NO interactive element inside. In this case, the card could be placed in any container.

The listitem is the recommended role for card. With this role, all interactive variants of the card can be covered: - Non-interactive card - Non-interactive card with interactive elements inside - Interactive card - Interactive card with interactive elements Only the list item role allows nested interactions, which means: the card can be interactive itself while also having interactive elements inside. It is not recommended to use interactive cards outside list containers! The card container must be a list, even when there's only one card. The container of the list has role region and aria-label. If there's no container for the list, the label has to be placed on the card container list.

The main card header block shows the basic information of the card. It comes in two interactivity variants: - non-interactive: default - interactive: add the .fd-card__header--interactive modifier class to the .fd-card__header base class. Building blocks of the Main Header: - title: title is mandatory to explain what content is being displayed to the user. It wraps 3 lines. - avatar (optional): avatar should be displayed in a size S (3rem). - subtitle (optional): the subtitle provides additional context to the title or displays a status. Its usage depends on the card type. Subtitles that exceed one line are truncated with an ellipsis (it wraps 2 lines). - counter (optional): the counter indicates how many items are showing on the card in relation to the total number of relevant items. If all the relevant items are visible on the card, no counter is shown. There is also no counter if there is an issue loading a card, or if no items are found in the filter criteria. The counter is right-aligned and is never truncated. - interactive element (optional): like an icon button.

The Extended header is a flexible block to hold various other components, like time stamp, rating, tags, label/value, long text, numeric values, etc. The components can be arranged in left column or right column, each column is suggested to have maximum 3 lines for placing the components. - .fd-card__header-extended--top-aligned and .fd-card__header-extended--bottom-aligned modifier classes applied with the .fd-card__header-extended base class will align the content of the columns vertically to the top or the bottom (default is center). - .fd-card__header-column--right-aligned modifier class for .fd-card__header-column will align the content of the column to the right.

The numeric header block is designed for displaying numeric information.

Alternatively to an Avatar a Message Icon can be displayed within the Main Header. This will be available in three different sizes (this is only applicable for Message Icons not Avatar component on Card Header). The Message Icons are non-interactive. Icon Sizes Size font-size Icon Modifier Class S 1rem .sap-icon--sm M 2rem .sap-icon--md L 3rem .sap-icon--lg Semantic Notification / Message Icons Description Icon Name Icon Modifier Class Color Modifier Class Negative Notification error .sap-icon--error .sap-icon--color-negative Critical Notification alert .sap-icon--alert .sap-icon--color-critical Positive Notification sys-enter-2 .sap-icon--sys-enter-2 .sap-icon--color-positive Information Notification information .sap-icon--information .sap-icon--color-information Neutral Notification sys-help-2 .sap-icon--sys-help-2 .sap-icon--color-neutral

Use Illustrated Messages component inside the Card content to represent an empty state. The content container has 1rem spacing.

The analytical card is used for data visualization. It can display a KPI header and various chart types in the content. The only difference between a KPI header and a standard header is that the former requires a subtitle, a KPI area and can display an optional second subtitle. To display an analytical card, add the \

A card can display various types of lists. All components placed inside should behave natively. For this kind of card it is not recommended to keep header interactive, or navigable.

Cards can display tables within the content area. To display a table card, add the `fd-card--table` modifier class to the main element.

The object card can display a single object or a group of objects. Contrary to other cards, object card has 1rem padding on all sides of the content area. To display an object card, add the \