Backgrounds

Here is where all background images, patterns, textures, gradients can be created. There is only one placeholder here, which is used as the default throughout the Component System. This element can be duplicated to create new background visuals. Duplicate the .c-container element and its contents and create new classes from the .bg-placeholder class. (E.g. .bg-forrest or .bg-contact-hero)

Implementation tip
Consider applying a global, default background image to the existing .bg-placeholder class to correctly brand the components that utilise this class throughout the site.

.bg-placeholder

.bg-marble

.bg-slate

.bg-wooden-table

.bg-marble-repeating

.bg-slate-repeating

.bg-where-to-buy-form

.bg-wholesale-form