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.

Come check out our Storybook pilot!

We are eager to receive feedback from designers & developers on their opionions on Storybook. Here are some example questions:

  • Can you find guidance on how to use a component?
  • Are you able to see how a component will appear in a mobile viewport?

Components

Components are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface.

How are components different from patterns?

Components, as noted above, can be considered UI chunks, whereas patterns are design solutions to recurring problems. In Formation, components have a class prefix and patterns, typically built with a combination of components and utility classes, do not.

Components can be considered concrete, a finite list: buttons, accordions, tables, etc. Patterns might be unique to a site or or an application, and may evolve with changes in technology or after competitive analysis.

Naming conventions

Components have class prefix of c, for component.

Adding variants

Any variants to a component should use the BEM syntax. In Formation, you should include both the base class and the modifier class on an element.

<button class="vads-c-button vads-c-button--small"></button>