Header - Minimal - VA.gov Design System

Components

Use with caution: Candidate

The minimal header can be used when navigating away would prevent the user from easily accomplishing their main task.

Contributors: Ben Brasso (Agile 6); Ya-ching Tsao (CivicActions); Zach Park (Agile 6); Kristen McConnell (Ad Hoc)

Examples

Reduce the chance of a user leaving a form, process, or task before completing the required steps. The minimal header retains VA.gov branding and the Banner - Official Gov so that users still know they are on VA.gov. However, it removes elements of the standard header, such as the Sign In button and main menu navigation, in order to reduce the chances of users leaving a form or process before completing all the required steps and accomplishing their goal. While most forms support finishing the form later, we still prefer to keep users focused on the task at hand.
A tasks that is time-sensitive. The minimal header is also appropriate when a user must complete a task in a timely fashion and thus navigating away would put task completion at risk.
An experience outside of the VA.gov site-wide information architecture. Some experiences do not exist within the information architecture of VA.gov or have already implemented a distinct navigation pattern and thus can also use the minimal header.

Use with the Footer - Minimal. The minimal header should be used in conjunction with the minimal footer.

Set form title as header and sub-header. The minimal header has header and subheader props that allow for setting the title of the form and the form number, respectively. Use of this component is intended for form flows and in particular when the h1 of the page is being to ask the user a question in keeping with the One Thing Per Page content principle.

For form titles:
- Use a plain language description of the benefit or service.
- Use a maximum of 52 characters.
- The form subtitle should not have “Equal to” before the full title of the PDF form.

Guidance: Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
Research: VFS team conducted research on this component which is linked from this page.
Stability: Component has been in production for more than 3 months with no significant issues found.
Adoption: Multiple teams have adopted this component.

While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.

Variations: Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component depicted in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.
Internationalization: Describes i18n attributes.

Variations: Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
Responsive: Component designed to work in all responsive breakpoints.
Interactive states: Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
Tokens: All design attributes (color, typography, layout, etc.) are available as tokens.