A component to show other components at the center of view within a customizable panel.

Clicking on the semi-opaque background emits the `close` event, which you can use to dismiss the banner itself.

You can also trigger the `close` event by pressing the ESC key.

You can control the `z-index` via `theme.zIndex` (which defaults to 2000).

The `_screen` prop expects a store with the same name from `@svizzle/ui`'s `ScreenSensor` and is used to style the component for `medium` screens.`

Choose an example

Usage

<script>
  import {Banner} from '@svizzle/ui';
</script>

<Banner>
  <h1>Welcome!</h1>
  <p>This site uses cookies!</p>
  <p>Below you got a link.</p>
  <HyperLink
    href='https://en.wikipedia.org/wiki/HTTP_cookie'
    type='external'
  >
    Here you can find more about it
  </HyperLink>
</Banner>

Props