| layout | component | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | Banner | ||||||||||||
| permalink | /components/banner/ | ||||||||||||
| intro-text | Banners are for announcements that typically prepare a Veteran to visit a VA facility or to help them maintain their health. Banners appear at the top of the page, below the header and navigation components. | ||||||||||||
| web-component | va-banner | ||||||||||||
| web | true | ||||||||||||
| mobile-app | false | ||||||||||||
| sub-pages |
|
||||||||||||
| anchors |
|
{% include _site-in-this-section.html %}
{% include storybook-preview.html story="components-va-banner--default" height="172px" link_text="va-banner" %}
{% include storybook-preview.html story="components-va-banner--dismissible" height="172px" link_text="va-banner" %}
{% include a11y/dismissable-alerts.md component="banner" %}
- Emergency or very urgent communications. On the home page, use Banner exclusively for urgent communications that notify Veterans, VA employees, and the public of events that affect VA services. For example, a government shutdown affecting VA services.
- Preparing a Veteran to visit a VA facility. Many of the messages typically found in banners are managed by VA Facilities and help a Veteran prepare for their visit to a facility. Those messages include, but are not limited to:
- Active threat training exercise warnings
- Changes to availability, hours, or wait times for emergency or urgent care
- Construction on campus or in the area
- COVID-19 operational updates
- Holiday closures
- Permanent facility closure
- Utility outages (phone, water, etc.)
- Wildfire, natural disasters, and inclement weather
- Delays in filling prescriptions
- Additional Veteran actions. Finally, there are additional messages that require an action from a Veteran that may use this component:
- IRS deadline for benefit declarations
- Sign up for notifications
- User feedback. Use [feedback messages]({{ site.baseurl }}/content-style-guide/error-messages/feedback) to respond to an action a user has taken and to draw their attention to something they need to correct or confirm. The [Alert]({{ site.baseurl }}/components/alert) component handles these messages.
- In-application system status, engagement, and access messages. The [Alert]({{ site.baseurl }}/components/alert) component handles all messages in our [messages dictionary]({{ site.baseurl }}/content-style-guide/error-messages). For application-level maintenance, review the downtime notifications guidance.
- System maintenance. Use the [Banner - Maintenance]({{ site.baseurl }}/components/banner/maintenance) component to display [specific system status messages]({{ site.baseurl }}/content-style-guide/error-messages/system) that communicate the maintenance window to users before and during maintenance.
- Helping a Veteran maintain their health. Another category of messages broadly relates to helping Veterans manage their health. Manage these messages with a combination of Content Management System (CMS) components as follows:
- Call center/secure messaging promotion: Story with spotlight.
- Flu shot general availability/promotion of flu clinic: Story with spotlight, Event for flu clinics, or a program page with a link to a spotlight area.
- Learn about vaccinations: Program page with link from spotlight area or Story with spotlight. Note: Do not duplicate national content.
- New phone numbers: News release, Story
- Town Hall event announcement: Event with spotlight.
- Don't stack banners. Only one Banner may appear on any page at one time. If multiple emergency issues occur at once, combine the message and link out to a landing page or to individual affected medical centers, for example.
- Info and warning only. Banner is only available in
infoorwarningstyles. - Dismissible by default. Generally, make banners dismissible by the user.
- Links, not buttons. Don't use buttons in Banner. [Use buttons for actions and links for navigation]({{ site.baseurl }}/components/link#choose-the-right-element-buttons-vs-links).
- Content inside Banner remains aligned to the main page grid container. This might not be apparent on this site in smaller screens.
- Can be used on homepage or, in true emergencies, on lower-level pages.
<va-link-action href="{{ site.storybook_path }}/?path=/docs/components-va-banner--docs" text="View Banner guidance in Storybook for use on VA.gov" type="secondary"
- Short and informative headlines. Try to keep headlines to 70 characters maximum, with spaces. Titles become hard to scan when they’re too long. Eliminate unnecessary details or nuance in titles, and address them with more depth in the message copy.
- Short messages with links for greater detail. Try to keep message copy to 300 characters maximum, with spaces. When more detail is needed, link to another page that has all of the details. Pages that can be linked to might include Operating status or News releases.