Skip to content

feat(ui5-hero-banner): introduce Hero Banner component#13230

Merged
GDamyanov merged 58 commits into
mainfrom
header-banner-poc
Jun 5, 2026
Merged

feat(ui5-hero-banner): introduce Hero Banner component#13230
GDamyanov merged 58 commits into
mainfrom
header-banner-poc

Conversation

@tsanislavgatev
Copy link
Copy Markdown
Contributor

@tsanislavgatev tsanislavgatev commented Mar 9, 2026

Summary

This PR introduces a brand-new ui5-hero-banner component for Fiori pages.

ui5-hero-banner provides a flexible, responsive banner area for product home pages, including:

  • greeting/header text
  • optional overline/context text
  • configurable content layout
  • configurable header/actions placement
  • dedicated slots for primary content, secondary content, and actions

Motivation

Many product home pages need a reusable “hero” section that can combine:

  • contextual header information
  • quick actions
  • custom business content (KPIs/cards/search/widgets)

This PR adds a dedicated component for that use case, with responsive behavior and clear placement rules for header/actions/content.


Public API

Properties

  • headerText
    Main headline of the banner.

  • overlineText
    Smaller contextual text shown above the headline.

  • columnsRatio
    Controls how content is split when both content areas are used:

    • Equal (1:1)
    • FirstWider (2:1)
      If not set, content behaves as single-column.
  • actionsPlacement
    Controls where actions are rendered:

    • TopEnd (top/right-end area in header)
    • BottomStart (below header text, left/start aligned)
  • headerBlockPlacement
    Controls vertical placement of the header block:

    • Top
    • Bottom
      (Bottom mode follows defined layout conditions for predictable behavior.)

Slots

  • Default slot (startContent)

    • Primary content area.
    • Receives content without a slot attribute.
    • Typical usage: KPI cards, search, summary widgets, filters, shortcuts.
  • endContent

    • Secondary content area.
    • Rendered as the second column when columnsRatio is set.
    • On small screens, stacks below default slot content.
    • In specific placement combinations, can stretch to preserve visual balance.
  • actions

    • Header action area for quick tasks (buttons, links, icon buttons).
    • Supports multiple action elements.
    • Placement follows actionsPlacement and related layout rules.

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented Mar 9, 2026

🧹 Preview deployment cleaned up: https://pr-13230--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 9, 2026 14:42 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 12, 2026 13:14 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 12, 2026 14:45 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 23, 2026 07:53 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 25, 2026 10:30 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 2, 2026 13:43 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 3, 2026 12:09 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 6, 2026 14:11 Inactive
@github-actions github-actions Bot added the Stale label Apr 21, 2026
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 21, 2026 06:50 Inactive
@github-actions github-actions Bot removed the Stale label Apr 22, 2026
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 28, 2026 11:53 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 28, 2026 13:52 Inactive
@unazko unazko self-requested a review May 4, 2026 15:17
Comment thread packages/fiori/src/HeroBannerTemplate.tsx
Comment thread packages/fiori/test/pages/Banner.html Outdated
Comment thread packages/fiori/test/pages/Banner.html Outdated
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 4, 2026 14:45 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 4, 2026 15:02 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 4, 2026 15:46 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 4, 2026 16:02 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 4, 2026 16:15 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 06:55 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 07:42 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 08:20 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 08:40 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 09:41 — with GitHub Actions Inactive
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 10:03 — with GitHub Actions Inactive
Comment thread packages/fiori/cypress/specs/HeroBanner.cy.tsx Outdated
@GDamyanov GDamyanov temporarily deployed to netlify-preview June 5, 2026 11:29 — with GitHub Actions Inactive
@GDamyanov GDamyanov self-requested a review June 5, 2026 11:32
@sap-ui5-webcomponents-release
Copy link
Copy Markdown

🎉 This PR is included in version v2.23.0 🎉

The release is available on v2.23.0

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants