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

<Meta title="Components/Molecules/Breaking News Banners" />


# Breaking News Banner

The Breaking News Banner will be used to display important developing news stories that matter to our users in a prominent and eye-catching develop, alerting users to growing news stories. as they develop. As a news organization, it is incredibly important to put news that users are looking for in a prominent position to call attention as soon as a user lands on an NYPR website.  When the Breaking News Banner is live, it will appear across all site pages.

You can find instructions on how to populate this banner here: https://wiki.nypr.digital/display/DS/How+to+Create+a+Breaking+News+Banner

## Rules

The Breaking News Banner should use the same rules set for Cards. 

Required fields include:  “Breaking News” label, Headline, and Timestamp.

## Brand Examples (Mobile & Desktop)

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

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