Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour.
At the lower level there are components which are a type of "ingredient" used to assemble into the higher level patterns with richer templates with usability guidance.
Components are intended for re-use and should be named for what they are; that is:
This ensures that that a box will always be rectangular-ish pattern on pages, whereas an "introduction" may be a box today, but become simply large text after a redesign.
When naming components, use something simple and obvious.
We use a variation of the atomic design methodology. We use: elements, blocks, and containers.
element: a heading or button
block: a teaser, summary or search form
container: would be a group of summaries
More about VF component types
CHANGELOG.md: Notable changes
index.scss: Used to generate a standalone version of the component's CSS
package.json: Version information and any required npm dependencies
README.md: Information on the role and how to use a component
vf-sample.config.yml: Configuration information about the compony, release status, type of component, variants
vf-sample.njk: A Nunjuck-based template
vf-sample.react.js: React wrapper
Dynamic files made at build time
_package.variables.scss_: Variables extracted from package.json that can be used in the Sass, such as a version number
_vf-sample.precompiled.js_: A compiled version of the Nunjucks template
_vf-sample.css_: Standalone CSS made from the index.scss
If your pattern is primarily intended to be used for particular websites or a brand, give it a name that is attached to the role it performs; that is:
Naming for the role the pattern does allows us to change the future visual structure, so a "display headline" today may have a black background, but tomorrow might have no background and be large and italic text.
An HTML code template (Nunjucks)
Documentation on how to use
For further guidance on the distinctions, see: Patterns ≠ Components and UK.gov's information on patterns vs components.
And see these VF guidance entries:
Find an issue on this page? Propose a change or discuss it.