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

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.

Banner height

The banner height is flexible to fit the content.

• Minimum height: 5.75rem (92px)
• Maximum recommended height: 24rem (384px)

Banner with minimum height

Banner with maximum recommended height

Banner position

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

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:

• Change the background color
• Use a different background image
• Change the text color for date, salutation or any other text that sits directly on the background to achieve the right color contrast and remain accessible.
• Remove the banner altogether

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.

Up to 1024px

Responsive behavior up to 1024px

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

The banner elements adapt as follows:

• The date wraps to show the full format and increases the banner height as needed.
• The salutation wraps to the next line, making the banner taller as needed. After three lines, it truncates with the ellipsis (…).
• The action area buttons move into the overflow if the screen is too narrow to display all actions. If needed, the entire section can wrap underneath the salutation area.
• The height of the banner hugs its contents. The banner resizes responsively, becoming taller or shorter depending on the content elements it holds.

Large Screens

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

Large screens include:

• XL: 1440px
• MAX: 1920px
• 4K: 2560px

Full width layout

Letterboxing layout

Related Links