information
Implementation of the home page banner web component is still in progress. This guideline provides a preview for product teams in SAP Business Suite.

Intro

The home page banner is a standard card used in the hero space of the product home page. It can accommodate different elements, depending on the needs of each product. The banner creates a consistent experience across SAP Business Suite home pages while still allowing for flexibility at the product level.

Product home page banner

When to Use

Do

Use the home page banner on any product home page that is part of SAP Business Suite.

Don’t

Don’t use the home page banner on other product pages, such as overview pages. The banner is reserved as a standard element to unify product home pages.

information
The home page banner will be mandatory for product home pages in SAP Business Suite, starting with SAP S4/HANA Cloud Public Edition ERP and SuccessFactors.

Anatomy

Anatomy of the banner component

  1. Banner
  2. Date
  3. Salutation
  4. Background image
  5. Background color
  6. Content area (optional)
  7. Action area (optional)

Mandatory elements

  1. Banner: Standard visual element that unifies all product home pages.
  2. Date: Shows the current date. Use the full format (Weekday, Month DD, YYYY), for example: Thursday, November 5, 2025.
  3. Salutation: Personalized static greeting title, usually shown as “Hello, <First Name>”. Appears below the date.
  4. Background image: Default background image. Every product must use a CSS linear transparent gradient.
  5. Background color: Default background color that appears behind the background image gradient and colors the banner.

Optional elements

  1. Content area: The content area displays information that requires user attention, such as KPIs, buttons, search fields, or text.

    • Product requirements determine the content and layout.
    • Content must be responsive.
    • Most content needs to be enclosed in cards to ensure proper color contrast.
  2. Action area: The action area provides quick-access buttons that guide users to common or high-priority tasks in the product context.

    • Display buttons based on roles, showing or hiding them according to product requirements.
    • Use only secondary button styling, not primary or tertiary.

The banner height is flexible to fit the content.

Banner with minimum height

Banner with maximum recommended height

Place the home page banner below the persistent shell bar at the top, and beneath the optional tab bar if it’s present.

Banner position

guideline
The banner must scroll out of view when users scroll down the page. It must not be sticky.

Theming

The home page banner supports standard SAP Fiori themes.

Layout Examples

You can tailor the layout to your product context.

Basic banner

Basic banner with date and salutation

Full banner

Content area in the bottom half, full width

Variation – SuccessFactors

50/50 layout

Customization

If the product supports a theme designer, administrators can fully customize the banner for each theme. They can:

Banner with custom color

Banner with custom background

No banner

Behavior and Interaction

The banner itself is non-interactive. However, elements within the banner follow the behavior of their corresponding components, such as buttons.

Responsiveness

The home page banner is responsive and supports standard SAP Fiori breakpoints.

information
Although SAP Fiori doesn’t yet include XS, MAX, and 4K breakpoints, these sizes are included for reference at the request of product teams.

Up to 1024px

Responsive behavior up to 1024px

XS: 320px
S: 450px
M: 600px
L: 1024px

The banner elements adapt as follows:

Large Screens

On large screens, choose either a full-width banner or a letterboxing layout, depending on product requirements.

Large screens include:

Full width layout

Letterboxing layout

Guidelines

Foundations

Components

Specifications