@primer/react-brand/lib/BreakoutBanner/BreakoutBanner.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { ReactElement } from 'react';
import { Icon } from '@primer/octicons-react';
import type { BaseProps } from '../component-helpers';
import { HeadingProps, StackProps } from '../';
type ResponsiveMap<T> = {
    narrow?: T;
    regular?: T;
    wide?: T;
};
export declare const BreakoutBannerBackgroundColors: readonly ["default", "subtle"];
type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
type BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] | AnyString;
type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
export type BreakoutBannerProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
    children: React.ReactNode | React.ReactNode[];
    /**
     * The alignment of the content within the banner
     */
    align?: 'start' | 'center';
    /**
     * Optional, custom background color
     */
    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
    /**
     * Optional, custom background image
     */
    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
    /**
     * Optional, custom background position
     */
    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
    /**
     * Optional, custom background size
     */
    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
    /**
     * An optional leading visual that appears before the heading
     */
    leadingVisual?: ReactElement | Icon;
};
type BreakoutBannerHeadingProps = BaseProps<HTMLHeadingElement> & {
    children: React.ReactNode | React.ReactNode[];
} & HeadingProps;
type BreakoutBannerDescriptionProps = BaseProps<HTMLParagraphElement> & {
    children: React.ReactNode | React.ReactNode[];
};
/**
 * Breakout banner component
 * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.
 */
export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BreakoutBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Heading: React.ForwardRefExoticComponent<Omit<BreakoutBannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<Omit<BreakoutBannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    LinkGroup: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "ref"> & React.RefAttributes<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
};
export {};