Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Patterns

Signed out vs. signed in

If a user has not signed in to VA.gov, we know very little information about the user. When the user signs in and verifies their identity, we know who the user is. In either case, we display the most relevant content, features, and calls to action.

The site header appears at the top of every page. Since VA.gov is responsive, the header’s design adapts to the width of the screen.

Large screens

When users sign in, the Sign In button is replaced by a link displays the user’s first name. My VA and My Health are also shown as top navigation elements.

Signed out

signed out header on desktop

Signed in

signed in header on desktop

Small screens

When users are signed into the site on a smaller device, the Sign In link is replaced with the user’s first name.

Signed out

signed out view of mobile header

Signed in

Signed in view of mobile header

When users are signed in and have opened the menu, My VA and My Health are shown as options at the bottom of the list.

Signed out

screenshot of menu open when signed out

Signed in

screenshot of menu open when signed in

Contextual calls to action

A contextual CTA is used when an action is required or recommended before a user starts a process (like applying for a VA benefit.) Contextual CTAs are placed within a larger chunk of content on a page. Placement depends on its importance compared to other content on the page. Often it is placed immediately after introduction text on a page.

When is a contextual CTA appropriate?

Use a contextual CTA when:

  • The user is required to do something before starting a process
  • The user would benefit from doing something before starting a process
  • The CTA includes important supplemental information
  • An error has occurred and the user is blocked from proceeding

Use the alert box component for contextual CTAs.

Possible states of a contextual CTA

A contextual CTA may change based on the authentication status of the user.

CTA required to continue

Use the green alert box component when the user is required to do something before they can continue a process.

Signed out

create account screenshot

Signed in

verify identity screen shot

CTA beneficial, not required

Use the blue informational alert box component when the call to action is beneficial, but not required to proceed. Usually, it is a better experience when the user is signed in, so the prompting the user to sign in first is the primary action.

call to action screenshot

Error

Use a red alert box component when the user is blocked from continuing a process. Always offer at least one way for the user to resolve the error.

verify identity error