Building a site

How to make a project with Visual Framework components.

Components are part of patterns

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.

Type 1: Components

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.

Component types

We use a variation of the atomic design methodology. We use: elements, blocks, and containers.

More about the atomic design concept here.

Components have

Type 2: Patterns

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.

Patterns have

Learn more

For further guidance on the distinctions, see: Patterns ≠ Components and UK.gov's information on patterns vs components.


See also

Also in this section

More from the Building a site section

Browser support

We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%.

Components are part of patterns

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.

Content guidelines

Unique to the web are certain types of content that support user interaction.

Find an issue on this page? Propose a change or discuss it.