VA Pattern Library - Overview

This Fractal Guide contains elements and components to be used as a starting point for developing VA applications. You can browse through these components using the navigation on the left side panel.

Components

Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.

Label Description
Component is slotted for development.
Currently being developed. Not ready for testing.
Development complete. Ready for testing.

Development and testing complete. Ready to implement.

Previewing

Components can be previewed in without the Fractal UI wrapper by using the button next to the component title.

Related Source Files

Within each component’s page there is a section displaying the associated HTML of the component. In addition, the Info tab references the filesystem path for the component’s source Handlebars file.

Commented at the top of the HTML tab is the relevant file paths to the component’s associated SASS and JavaScript files. This information is only present if the component’s styles or functionality was supplemented/altered/created on top of the USWDS framework.

Any USWDS related files can be found in the node_modules/uswds/src/ directory.

Notes

The notes tab additionally includes a link to the related page of the VA UX Guide website where guidance on Accessibility, Usage, and Implementation can be found. Additional information may be listed in this section for Code Guidance.