@nexusui/components/core/HeroBanner/HeroBanner.container.d.ts

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import { ReactElement, ReactNode } from 'react';
import { CardProps } from '@mui/material/Card';
/** The props type of [[`HeroBanner`]]. */
export interface IHeroBanner extends Omit<CardProps, 'title'> {
    /**
     *  Background image could be a string of path or a custom component
     */
    backgroundImage?: string | ReactElement;
    /**
     *  Background color of the HeaderBanner
     */
    backgroundColor?: string;
    /**
     *  The first line of text / content. It can be a string or a custom component.
     */
    title: string | ReactElement;
    /**
     *  The second line of text / content. It can be a string or a custom component.
     */
    description: string | ReactElement;
    /**
     *  If the content has an author, you can display it below the title and description. This can be a string or a custom component.
     */
    authorName?: string | ReactNode;
    /**
     *  Last updated could be a string or a custom component
     */
    lastUpdated?: string | ReactNode;
    /**
     *  If the content has a last updated time, you can display it below the title and description. This can be a string or a custom component.
     */
    actionElements?: ReadonlyArray<ReactElement>;
}
/** The props type of [[`HeroBannerComponent`]]. */
export interface IHeroBannerComponent extends Omit<CardProps, 'title'> {
    backgroundImage?: string | ReactElement;
    backgroundColor?: string;
    titleComponent: ReactNode;
    descriptionComponent: ReactNode;
    authorNameComponent?: ReactNode;
    lastUpdatedComponent?: ReactNode;
    actionComponent?: ReactNode;
}
export declare const HeroBanner: (props: IHeroBanner) => import("react/jsx-runtime").JSX.Element;