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.

August updates! We reorganized our patterns in August.

Patterns

Patterns are solutions and researched best practices for solving user-focused tasks and recurring user interface design problems:
  • How do you build complex, multi-part web forms?
  • How do you provide navigational context?
  • How do you handle progressive disclosure?

All of the patterns in this section show or cite examples from VA.gov and were researched, designed, developed, and tested by teams creating applications on our platform.

What is the difference between components, templates, and patterns?

Components

Components are design elements that define a visual style and/or micro-interaction. A component is the smallest unit of measure within a design system. They can be considered concrete, a finite list: Button, accordion, table, etc.

Templates or Page layouts

Templates, or page layouts, compose components within a single page. A layout can contain multiple variations of a component depending on the context.

Patterns

Patterns incorporate one or more page layouts and components to create an interaction that can span multiple pages, a short or long time span, and potentially even multiple channels. Patterns might be unique to a site or an application and may evolve with changes in technology or after competitive analysis.

A pattern is more than the sum of its parts. Patterns are solutions. In the Design System, patterns demonstrate how design, content strategy, reusable components, and accessibility can be put together to solve common problems that all Veterans may experience on VA.gov.

Create or update a pattern

If you have a new pattern, or an update to an existing pattern, consider contributing back to the design system. Reach out to the Design System Team if you have questions.

Create or update a pattern

Edit this page in GitHub (Permissions required)
Last updated: Aug 25, 2022