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>