Crisis Line Modal - VA.gov Design System

Components

Use with caution: Candidate

The Crisis Line Modal is found in the Header of VA.gov and provides contact information for the Veteran Crisis Line.

Examples

Provided by default in the VA.gov header. The Crisis Line modal is a sub-component of the header component. The web-component version of this modal will be included in the injected VA.gov header web-component when that component is built.

This modal must always appear in the VA.gov header, including the minimal variation.

Do not alter the contents of this component. The contents of this component are governed by CAIA.

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.; Note: This component is not yet in use in production.

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.

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.

50% complete (8 of 16)

Legend: