Components
Crisis Line Modal
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
Default
View va-crisis-line-modal default in Storybook
Usage
- 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.
Placement
- This modal must always appear in the VA.gov header, including the minimal variation.
Content considerations
- Do not alter the contents of this component. The contents of this component are governed by CAIA.
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.
- Note: This component is not yet in use in production.
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.
50% complete (8 of 16)
Legend:
- Complete
- Incomplete
- Not applicable