Warning icon

Due to inclement weather, all locations are closed until further notice.

To see a provider virtually, please visit core.womp.it/quickcare →

This notice banner is not dismissable.

This sentence was added via <Slot name='body' />.

<NoticeBanner />

This demo page features two instances of the NoticeBanner component. One is at the top and is not dismissable. The other, if it hasn't been dismissed, would appear as a modal in the center of the screen.

There are three paragraph elements included in the notice banner that can be populated from config values. The second one can contain a link with text on either side. To remove the hyperlink or text elements, set the related value to an empty string.

We also have a fourth section, which is populated using a slot component. This gives us more flexibility, but it's not designed to be populated via data. It can be filled with any HTML or component. Thus, the banner can include anything we need.

The default position of the notice-banner is relative so it appears in it's natural DOM order, but if you set the bannerPosition property to “center,” it will be presented as a modal with a grey overlay behind it. You can change where it's positioned and the color of the overlay using CSS on the active class that appears on the overlay. You can override the CSS using the stylesheet.

The notice banner has a timed display feature. If you set the displayStartDateStr and displayEndDateStr properties to date strings in the format of “YYYY-MM-DDTHH:MM:SSZ”, you can control when the banner is visible. In the examples on screen, the modal banner will be visible from March 17, 2025 to March 20, 2050. To assist with troubleshooting, the start and end date strings are displayed as attribute values on the component.

By default, the notice-banner cannot be dismissed, but if isDismissable is true, or if the bannerPosition property is “center,” it will be hidden when the close button or the grey overlay behind the modal is clicked. We have option to control whether clicking the grey overlay closes the banner.

The notice banner is configured to store it's state in localStorage by default, but the dismissable example on this page is configured to use sessionStorage, so it will appear at least once per session. By default, a dismissable banner will reappear after a week, but you can set the dismissed time to any number of days with the daysDismissable property.

IMPORTANT: If you want more than one notice banner, make sure to give each one a unique id value.