Banner

A bold surface that should be displayed before any other page content.

Examples

Basic Banner

The basic Banner has bold, centered content.

Duis ut ea fugiat cillum.

import { Banner } from '@curology/ui-components-web/react/Banner';
<Banner>
  Some banner copy
</Banner>

With Icons

Three different icons can be supplied.

Est voluptate sunt sit ad amet ipsum.

Est voluptate sunt sit ad amet ipsum.

Est voluptate sunt sit ad amet ipsum.

Est voluptate sunt sit ad amet ipsum.

import { Banner } from '@curology/ui-components-web/react/Banner';
<Banner
  iconStart={iconNameOrComponent}
  iconEnd={iconNameOrComponent}
  iconPromo={iconNameOrComponent}
>
  ...
</Banner>

Props

BannerProps

Name	Type	Default Value	Required	Description
All attributes of a <header />
iconEnd	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the end of the input.
iconPromo	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render to the left of the copy.
iconStart	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the front of the input.