HeroBanner

<ui5-hero-banner> | Since 2.23.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

The ui5-hero-banner is a flexible, full-width banner designed for placement at the top of a page. It provides a personalized greeting and quick access to key information or actions.

Structure

The HeroBanner consists of the following building blocks:

• Banner Canvas - the visual base with a background color, optional background image and shadow.
• Overline (optional) - contextual text at the top, e.g. the current date or a status message.
• Header (optional) - the main greeting header below the overline, e.g. "Hello, John".
• Free Slots (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.

The banner is not sticky — it scrolls away with the page content when the user scrolls down.

Usage

Place the ui5-hero-banner at the top of a page to welcome the user and surface relevant information or shortcuts at a glance.

The hero banner itself is non-interactive. However, interactive elements such as buttons, cards, or search fields can be placed inside the free content slots and will follow their own interactive states.

Responsive Behavior

The hero banner adapts to different screen sizes:

• On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.
• The heading text wraps to multiple lines as needed.
• Buttons in the headerAction slot will wrap.
• On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/HeroBanner.js";

Basic Sample

Properties

actionsPlacement

Description	Defines the placement of the actions slot within the hero banner header. - TopEnd (default) - Actions are displayed to the right of the header text, at the top of the header row. - BottomStart - Actions are displayed below the header text, left-aligned, regardless of columnsRatio or slot usage.
Type	"BottomStart" | "TopEnd" (value descriptions in: HeroBannerActionsPlacement)
Default	"TopEnd"

columnsRatio

Description	Defines the ratio between the two content columns inside the hero banner. Takes effect only when endContent is provided. When no endContent is present, the content spans the full width (single column). - Equal - Two equal columns. Both content blocks share the available width equally. On smaller screens, both slots stack vertically. - FirstWider - Two unequal columns. The start content takes two-thirds of the width, the end content one-third. On smaller screens, both slots stack vertically.
Type	"Equal" | "FirstWider" (value descriptions in: HeroBannerColumnsRatio)
Default	"FirstWider"

headerBlockPlacement

Description	Defines the vertical placement of the header block within the content area. - Top (default) - Header block is placed at the top of the content area. - Bottom - Header block is pushed to the bottom of column 1. Only takes effect when columnsRatio is Equal or FirstWider and only endContent is provided (no default slot content). When actionsPlacement is also BottomStart, the endContent slot spans the full height.
Type	"Bottom" | "Top" (value descriptions in: HeroBannerHeaderBlockPlacement)
Default	"Top"

headerText

Description	Defines the header text displayed in the hero banner. This is the main greeting header, typically a personalized message such as "Hello, John".
Type	string | undefined
Default	undefined

overlineText

Description	Defines text displayed above the heading as an overline. Can be used to show the current date, a status message, or any other relevant contextual information.
Type	string | undefined
Default	undefined

Slots

actions

Description	Defines action buttons displayed to the right of the header area. Typically used to display actions buttons in the top right corner. Can contain buttons, links, or other interactive elements that provide quick access to relevant actions directly from the hero banner header.
Type	Array<HTMLElement>

default

Description	Defines the first (default) free content block of the hero banner. This is the default slot — content placed directly inside <ui5-hero-banner> without a slot attribute lands here. Can contain KPI cards, search input fields, text, buttons, and more.
Type	Array<HTMLElement>

endContent

Description	Defines the second free content block of the hero banner. Used alongside startContent when columnsRatio is set (Equal, FirstWider). Can contain cards, buttons, and other interactive elements.
Type	Array<HTMLElement>

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

Name	Description
canvas	Used to style the banner canvas container
content	Used to style the content area of the banner
endContent	Used to style the end content block
header	Used to style the header area (salutation, date, header actions)
startContent	Used to style the start (default) content block

CSS Custom States

No CSS custom states available for this component.

More Samples

Columns Ratio

Header Block and Actions Placement

Custom Background Image

Different Use Cases