Banner

Display important messages at the top or bottom of a page

Use the Banner component to display important messages or alerts at the top or bottom of your page. Use them to announce promotions, discounts, or limited-time offers. You can also use the Banner component to notify users about updates, maintenance or system outages.

---
import { Banner } from 'webcoreui/astro'
---

<Banner>New version available! ✨</Banner>

<script>
    import { Banner } from 'webcoreui/svelte'
</script>

<Banner>New version available! ✨</Banner>

import React from 'react'
import { Banner } from 'webcoreui/react'

const Component = () => (
    <Banner>New version available! ✨</Banner>
)

export default Component

Banner Position

The position of the banner can be customized using the top and bottom props. By default, top is set to 0. You can customize this value in case you also have a navigation menu on top of the banner:

<Menu items={[ ... ]} logo={{ ... }} />
<Banner top={53}>New version available! ✨</Banner>

You can also globally set the top position of all your Banner components by overriding the following CSS variables:

html body {
    --w-banner-top: 0;
}

You can turn the Banner component into a bottom banner by setting the bottom prop to true:

<Banner bottom={true}>New version available! ✨</Banner>

Closable Banners

Depending on the type of the banner, you might want to allow users to close it. To create a closable banner, simply set the closeable prop to true on the Banner component, which will render a close icon:

<Banner closeable={true}>Click on the x icon to close this banner.</Banner>

Padded Banners

By default, the Banner component will take up the full width of the available space. You can enable paddings by setting the padded prop to true:

<Banner bottom={true} padded={true}>New version available! ✨</Banner>

Nonsticky Banners

To prevent the banner from following the viewport on scroll, set the sticky prop to false:

<Banner sticky={false}>New version available! ✨</Banner>

API

type BannerProps = {
    top?: number
    bottom?: boolean
    closeable?: boolean
    padded?: boolean
    sticky?: boolean
    className?: string
}