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.
Components have class prefix of
c, for component.
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>