| layout | component | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | Banner - Official Gov | ||||||||||||
| permalink | /components/banner/official-gov | ||||||||||||
| has-parent | /components/banner/ | ||||||||||||
| github-title | va-official-gov-banner | ||||||||||||
| figma-link-web | https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1173%3A5542&mode=design&t=vNilCSI60pQBiKkM-1 | ||||||||||||
| intro-text | This banner identifies official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure. | ||||||||||||
| web-component | va-official-gov-banner | ||||||||||||
| web | true | ||||||||||||
| mobile-app | false | ||||||||||||
| anchors |
|
{% include storybook-preview.html story="components-va-official-gov-banner--default" link_text="va-official-gov-banner" %}
{% include storybook-preview.html story="components-va-official-gov-banner--internationalization" link_text="va-official-gov-banner internationalization" %}
This component comes directly from the U.S. Web Design System (USWDS). Thus we follow the guidance and considerations documented in the USWDS for this component. The guidance below augments the USWDS guidance to give specifics on how we use the component at the VA.
Always. The official government banner should appear on every VA.gov page at the very top of the page.
Auto-injected. The official government banner is automatically injected onto all VA.gov pages using our content-build process.
Above header. The official government banner appears directly above the VA.gov header and
<va-link-action href="{{ site.storybook_path }}/?path=/docs/components-va-official-gov-banner--docs" text="View Banner - Official Gov guidance in Storybook for use on VA.gov" type="secondary"
<va-link-action href="{{ site.storybook_path }}/?path=/docs/components-va-official-gov-banner--docs" text="View Banner - Official Gov guidance in Storybook for use on VA.gov" type="secondary"