Overview

Featured cards are special types of cards that are used to display new or highlighted content that is of interest to the user. These cards serve the function of providing high-level news or information about a new capability in the product or highlights useful content within the product. The intention of these cards is to show the highlighted and featured information and motivate users to explore those. That’s why they can also be used as banner substitutes. These cards can be used to show new features, functionalities, services, information and are applicable for use in product and web environments.

Look and Feel

Legacy Guideline Available

This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.

Legacy Guidelines:

AppDev and Integration - Featured Card

When to Use

Anatomy

The Featured Card is a flexible concept that can be configured to meet the needs of your particular product and use case. This concept could be seen as consisting of different layers and for each layer you can make your own customisations.

Featured Card Layers

1. The card component

First define the attributes of the card component the Featured Card will be based on.

2. The grid

In order to make the Featured Card responsive, define a layout grid that will control how the elements will be moved and arranged at different breakpoints.

3. The card background fill

You can make your card stand out by giving it a background fill. This could be a solid color or a gradient between two colors. We recommend to use the BTP Reference Color Palette for choosing these colors as this provides a wide range of shades and is theme-able.

4. Abstract elements

You can choose to add abstract geometric elements to your card to use as the only visual accent or in combination with an illustration. These elements should also use the BTP Reference Color Palette.

5. Visual element

For your focal visual element you can choose to use a Horizon style illustration, an image or a video thumbnail.

6. Text and buttons

Finally you can define the title and body text and add the appropriate actions.

See also:

Responsiveness

BTP Reference Colors

BTP Illustrations

Responsiveness Options

There are different options for building the Featured Card responsively depending on the particular use case for it.

Follow the Card Layout Grid

Start by adding the Horizon Responsive Grid to your card. Make sure the grid has no margin on the sides.

Then define content blocks for your card: for example the text and buttons could be a content block, the image or illustration could be another. Allocate the appropriate amount of columns for each content block (for example for the 12 column grid used for the size L breakpoint each block gets 6 columns).

You can define additional padding inside your content block (for example you can add padding to the text so that it is further away from the edge of the card) and define the layout of the elements.

Do the same for all breakpoints since the number of columns and layout can change between breakpoints.

You are free in deciding how many columns to allocate to the text or the visual element. The layout and order of these elements is also flexible, just make sure that your design is consistent between breakpoints.

Below you can see some examples of different layouts and how they would look like on different breakpoints.

See also:

Horizon Responsive Grid

Follow the Product Home Grid

The product home layout consists of a base column layout and in addition each group of cards is defined as its own grid layout. This layout is effectively nesting grids and controlling their behavior for individual browser sizes. When working with this layout pattern the individual cards do not change size within one breakpoint; when the screen size increases or decreases, the cards only reshuffle to adjust better to the available space.

This makes the product home layout ideal for cards that have a peaking out element or otherwise complex layout, since this way you only have to define the layout of your card once per breakpoint.

The only exception to this rule is mobile, where it could make sense to follow a responsive layout instead where all cards maintain a certain distance to the left and right side of the screen.

See also:

Product Home

Maintain Aspect Ratio

If your Featured Card contains an image or video thumbnail where maintaining a certain aspect ratio (such as 16:9 or 4:3) is important you can use this approach to defining the responsive behavior.

Allow the image to scale (both horizontally and vertically) up to a certain point but make sure to define a maximum and minimum height for your card to avoid the proportions of the card getting very exaggerated. When scaling up (with the screen width increasing) once the card has reached the maximum height, the card can only grow horizontally with the image staying the same size and the text area growing in width. When scaling down the same principle applies; once the minimum height for the card is reached, the image stays the same size and the text area shrinks in width.

At some point the image might also have to start shrinking (and not maintaining aspect ratio anymore) so that again the text area doesn't grow exaggeratedly small. Still, this principle is useful for making sure that for most screen sizes the aspect ratio of the image is maintained.

Visual Options

Visual Layout Examples

Gradient Overlay

If your card features an image, you have the option to add a gradient overlay to better blend between the image and the background color of the card. The gradient should be a liner gradient where one end point is the same color as the background color and the other end is that color but completely transparent.

The rectangle containing the gradient does not need to span the entire width of the image but it should align with the layout grid if you are using one.

Peaking-Out Elements

To make your featured card stand out visually, you also have the option to make some elements "peak out" from the card. You can do this with parts of an image or with an illustration. To achieve more visual consistency and to avoid layout issues with carrousel cards, the peak-out area is restricted to the top of the card and also up to a certain height that is defined per breakpoint.

Building these cards responsively can be challenging so therefore following the Product Home concept is recommended. Another recommendation for the image variant is to have the peaking out element of the photo (in the above example: the people) and the background of the photo on separate layers and allow them to move independently from each other. The same goes for the illustration element that should be on a separate layer and the abstract background shapes that should move independently from it.

See also:

Visual Design Guidelines for Featured Card

Abstract Elements

Yet another option could be to just use some abstract shapes in the background and give the Featured Card visual emphasis using this option.

Select a color from the BTP Reference Colors and use different shades of it for the background gradient of your card as well as for the abstract elements. Make sure the text and the background meet accessibility contrast requirements.

Below you can see some examples of abstract patterns you can create using this technique.

You can also create different kinds of abstract patterns using waves and lines spanning the entire card and playing with blending modes.

Be careful with using overly busy and contrasting patterns in the background as they could affect accessibility of your Featured Card. Always test contrast ratios for your card in all themes.

See also:

BTP Reference Colors