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

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

</table> ## 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.2 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.2 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.2 1.4.11).
Keyboard interactions: Follows WCAG 2.2 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.

Property	Attribute	Type	Default	Description
`disableHeadings`	`disable-headings`	`boolean`	`false`	Disables use of heading tags in the minimal header in favor of ` ` tags. This is for when a heading level 1 needs to be used elsewhere, as there should only be one heading level 1 per page.</th> </tr>
`header`	`header`	`string`
`subheader`	`subheader`	`string`