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 example

When to Use

Anatomy

Layout option with content and action slots

Layout option with two content slots

Anatomy of the banner component

1. Banner
2. Date (optional)
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. Salutation: Personalized static greeting title, usually shown as “Hello, <First Name>”. Appears below the date.
3. Background image: Can be a gradient, an image, or absent. The default is set to a CSS linear transparent gradient in the themes.
4. Background color: Background color that appears behind the background image gradient and colors the banner. The default color is set to a CSS variable in the themes.

Optional elements

1. Date: Shows the current date. Use the full format (Weekday, Month DD, YYYY), for example: Thursday, November 5, 2025.

2. 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.

3. Action area: The action area provides controls, mainly buttons, that guide users to common or high-priority tasks in the product context.

   • Display controls based on roles, showing or hiding them as required by product requirements.
   • Use only secondary button styling, not primary or tertiary.
   • Controls used need to meet color-contrast requirements, given that the background is customizable.

Banner height

The banner height is flexible to suit the product's needs.

Banner position

Place the home page banner directly below the persistent shell bar, and beneath the optional tab bar when present. It should respond like the rest of the page to shell elements, such as an embedded side navigation on the left or a side panel on the right, if available. If the home page supports end-user or admin customization, the banner’s position and layout may be adjusted accordingly.

Banner position

Theming

The home page banner supports standard SAP Fiori themes.

Three theming variables automatically adjust the text color, background image, and background color for each theme. For example, they use different values in Horizon Light and Horizon Dark.

Customer admins may customize the banner by adjusting these variables in tools like Theme Designer or any other tool the product supports.

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

Full banner with additional content slot

50/50 layout

Customization

A product may support configuration options to allow end users or administrators to customize the banner. For example, a product may support changing the salutation text.

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 the corresponding components, such as buttons.

The home page may support end user or admin configurations, such as showing or hiding cards, reordering, or changing the layout of the page. In this case, the home page banner must follow the rules and behavior of the layout used for the cards, such as the grid layout. This guideline doesn’t cover focus or drag-and-drop behavior for the home page banner.

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.
• The action area wraps below the salutation if the screen is too narrow to display all actions.
• The height of the banner hugs its content. The banner resizes responsively, becoming taller or shorter depending on the content it contains.

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