Unlimited Possibilities for Designing Cards 

The resizable card layout is a layout for the overview page. It enables users to define a personalized card layout by changing not only the position of a card, but also its size, and thus how the card content is presented.

This layout gives users much greater flexibility in tailoring the overview page to their specific business needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card changes, the content adapts automatically to show the most relevant information in the available space.

At a Glance

• Flexible card dimensions (grid-based)
• More flexibility to define individual card layouts
• Responsive and adaptive card content
• Applying progressive disclosure principles

Unlike the fixed card layout, cards in the resizable card layout do not have fixed dimensions. In addition, the number of columns in the resizable layout is no longer limited (also see letterboxing).

The cards are positioned on an underlying grid, making it possible to arrange and resize cards in a flexible, yet guided manner. You can offer different views of the card content for different dimensions of the various card types. For example, you can show more items, zoom in or out, or change the granularity of a dataset.

The resizable card layout does not replace the fixed card layout.

Usage

Flexible Card Sizes

Dealing with White Space

If no additional content is available, the user still can make the card bigger, resulting in white space.

Resizing Parameters

The card content depends on the available space, which in turn determines how many items are shown, how each item is displayed, and the level of detail (granularity). How the content is resized depends on the type of card. For example, table cards can have fewer columns when the size of the card is decreased. By contrast, the content shown for each item on list cards remains the same.

Space

When a card is resized, the content adapts responsively. 

Example: List card
When the size of a card is reduced, texts might be truncated or wrapped. When the card size is increased again, the text is shown in full and previously wrapped text moves back onto one line. The line item content itself is unchanged.

Items

When you increase the size of a list or table card, more line items are shown.

Granularity

If you increase the size of an analytical card, more data points are revealed. In this example, the donut chart on the larger card shows more individual product categories.

Rearranging Cards – Behavior

When a user long presses on a card instead of just clicking, the mouse cursor changes to indicate that the card can be dragged. Cards can be dragged from both the header and content areas. 

Cards always strive towards the top of the page (uplift mode). When you move or stretch cards horizontally, the existing cards you displace are pushed downwards.

Getting Started

UX and DEV Investment Required

To enable users to benefit fully from the resizable card functionality, you need to define additional content that is revealed progressively as the card size grows. You will need to develop a content strategy to prioritize the chunks of information for each card type, and hence the order in which these additional chunks of information appear. For instance, the content strategy for a table card should answer the following questions:

• What should be the initial size of the card in the layout?
• Which table columns do you want to show in the card with the minimum width?
• Which table columns do you want to add when the card width is increased by one, two, three, … horizontal steps?

Keep in mind that the overview page is an SAP Fiori element.

Responsiveness

UI controls inside the cards react responsively when cards are resized. On mouse-release, additional content might be loaded, or content might be removed to reflect the new dimensions.

Resources