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.

Components

Header - Minimal

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

Default

View va-header-minimal in Storybook

With Subheader

View View va-header-minimal with subheader variation in Storybook

Usage

When to use Header - Minimal

  • 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.

How this component works

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

Behavior

  • 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.

Placement

  • At the top of the page. The minimal header appears at the top of the page.

Code usage

Attributes and Properties

Property Attribute Type Default Description
header header string
subheader subheader string

Content considerations

  • 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.

Component checklist

Maturity

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.

Accessibility

Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
Content zoom tested
Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
Tested in screen readers
Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.

Code assets

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.

Visual assets

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.
Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024