@ui5/webcomponents-react/dist/webComponents/HeroBanner/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents-fiori/dist/HeroBanner.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `HeroBanner` 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 `HeroBanner` 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.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [HeroBanner UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/HeroBanner) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [2.23.0](https://github.com/UI5/webcomponents/releases/tag/v2.23.0) of __@ui5/webcomponents-fiori__.
 * @experimental
 */
const HeroBanner = withWebComponent('ui5-hero-banner', ['actionsPlacement', 'columnsRatio', 'headerBlockPlacement', 'headerText', 'overlineText'], [], ['actions', 'endContent'], []);
HeroBanner.displayName = 'HeroBanner';
export { HeroBanner };