import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Components/Molecules/Callout Banners" />


# Callout Banners

Callout Banners are notifications that can inform the user of a change on the website or of an event that may be of interest. Most often, banners are used for marketing or product marketing messages. View a few examples of our Callout Banners in use below. Callout banners are usually dismissable, and are flexible in that only one element is required to be able to publish.

Examples of our different Callout Banner types are listed below.

You can find the instructions for populating these banners in the CMS here: https://wiki.nypr.digital/display/DS/How+to+Create+a+Product+Marketing+Banner



## Product Marketing Banner (Top)

There will be times when the Product team or larger organization will need to communicate with NYPR users across all site pages to alert them of something important happening on the site – whether we’re announcing a new design, calling for action for donation, letting users know of a change in cookie policy, or otherwise. The Product Marketing banner will be used to house these communications when necessary.

The PMB-Top appears directly below the Navigation and above the main page body content. Only a Title and Close button are required. 

### Rules

Title: Max-length of 3 lines of text (mobile) <br />
Description: Max-length of 5 lines of text (mobile)

### Product Marketing Banner (Top) Variation Examples

| Atoms Featured | Example |
|--|--|
| Close Button, Headline, Description, Button | X |
| Close Button, Headline, Button | X |
| Close Button, Headline (Linked) | X |

### Brand Examples (Mobile & Desktop)

#### Whitelabel
 <img alt="examples of a Whitelabel top callout banner" src="./images/Molecules-Organisms-CalloutBanner-WhitelabelTop.png" width="1000" />
<br/>

#### Gothamist
<img alt="examples of a Gothamist top callout banner" src="./images/Molecules-Organisms-CalloutBanner-GothamistTop.png" width="1000" />


## Product Marketing Banner (Persistent)

The PMB-Persistent or "Sticky PMB"  is intended for more product-minded announcements as opposed to marketing-based, such as in the case of a change to our Privacy Policy or an update on communication frequency. 

This module is persistant and appears sticky to the bottom edge of the browser. Only a Title and Close button are required. 

### Rules

Title: Max-length of 3 lines of text (mobile)<br />
Description: Max-length of 5 lines of text (mobile)

### Product Marketing Banner (Persistent) Variation Examples

| Atoms Featured | Example |
|--|--|
| Close Button, Headline, Description, Button | X |
| Close Button, Headline, Button | X |
| Close Button, Headline (Linked) | X |

### Brand Examples (Mobile & Desktop)

#### Whitelabel
 <img alt="examples of a Whitelabel persistent callout banner" src="./images/Molecules-Organisms-CalloutBanner-WhitelabelPersistent.png" width="1000" />
<br/>

#### Gothamist
<img alt="examples of a Gothamist persistent callout banner" src="./images/Molecules-Organisms-CalloutBanner-GothamistPersistent.png" width="1000" />