Component types

All components in the Visual Framework are dependent on its design tokens that provide colour, typography, spacing and other stylistic decisions as structured data.

Elements are the basic building blocks of the Visual Framework and includes buttons, badges, headings, text, links and so on. Every higher level component is made of these.

Utilising elements along with their own styling, blocks begin to make ready-made parts of a page, such as navigation, summary, profiles, card or a search form.

With these you can begin to imagine a page, but they do not provide structure between blocks.

Moving up from blocks, containers assemble collections of blocks in layout containers that can be stacked to build a page: a hero, banner, intro, video container and so on.

Giving structure and function to the fabric of the page, layout components determine reusable structure in grids, stacking layout and reusable clusters and flags.

These are supported by utility components (utility classes, smooth scroll, show more) that allow edge customisations and behaviour of the page.

• How to make a component

• Components vs patterns