| layout | component | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | Banner - Maintenance | ||||||||||||
| permalink | /components/banner/maintenance | ||||||||||||
| has-parent | /components/banner/ | ||||||||||||
| github-title | va-banner-maintenance | ||||||||||||
| figma-link-web | https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1173%3A4614&mode=design&t=vNilCSI60pQBiKkM-1 | ||||||||||||
| intro-text | Banners specifically for site-wide system messages, typically system maintenance, which are fixed to the top of the viewport. | ||||||||||||
| status | use-deployed | ||||||||||||
| web-component | va-maintenance-banner | ||||||||||||
| web | true | ||||||||||||
| mobile-app | false | ||||||||||||
| anchors |
|
{% include storybook-preview.html story="components-va-maintenance-banner--default" link_text="va-maintenance-banner" height="225px" %}
{% include storybook-preview.html story="components-va-maintenance-banner--maintenance-warning" link_text="va-maintenance-banner maintenance warning" height="225px" %}
- System maintenance. Before and during maintenance, we use [specific system status messages]({{ site.baseurl }}/content-style-guide/error-messages/system) to communicate the maintenance window to users. Use maintenance messages when all (or most) unauthenticated and authenticated applications, tools, or sign-in experiences across the entire site are affected (e.g., vets-api).
- Anything that is not a system status message. This component is only for site-wide [system status messages]({{ site.baseurl }}/content-style-guide/error-messages/system). There is no other appropriate use. For application-level maintenance, review the downtime notifications guidance.
The content and UX behavior of site-wide maintenance banners are standardized. Only the duration, dates, and times are customizable.
The Public Website Team (Office of the CTO Digital Experience) publishes downtime maintenance banners. These banners have the following characteristics:
- Dates, times, and duration (how many hours or minutes) are customizable in the upcoming/before message.
- Times are always given in Eastern time (ET).
- Banners are always dismissible per session.
- The "upcoming" before message should be published at least 12 hours in advance. Allow more lead time when the outage is unusually long or comprehensive.
- The banner automatically expires when downtime is complete.
- A maximum of 3 banners can appear simultaneously.
<va-link-action href="{{ site.storybook_path }}/?path=/docs/components-va-maintenance-banner--docs" text="View Banner - Maintenance guidance in Storybook for use on VA.gov" type="secondary"